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life, he worked as web editor for 


the ПОТ of Salford 


Andy Budd 

Andy Budd is designer and director 
at design consultancy Clearleft (www. 
clearleft.com). He also organises the 
d.Construct web conference, and 


enj РА досад and diving, 


Andy Clarke 

Andy is a UK designer who's passionate 
about web standards and accessibility. 
The founder of Stuff and Nonsense 
(www.stuffandnonsense,co.uk), he 


ES at events worldwide. 


Margaret Manning 

Margaret is CEO at Reading Room. 
She's a frequent keynote speaker. 

and recently won Ferale Entrepreneur 
of the year at the 2008 Fast Growth 
Business Awards. 


www.readineroom.com 


Fadi Shuman 

Fadi Shuman is director and co-founder 

of Podi, a global network of digital 

agencies providing integrated. 

ecommerce and marketing solutions. 
%! for leading brands and retailers. 


ШҰ отела 


Julie Howell 

Julie has been working in digital since 

the web began. She wrote PAS78, the 
UK’s first web accessibility standard. 
She currently writes about technology 
for BBC WebWise. 
julichowe p. k 


Ryan Carson 

Originally from Colorado, Ryan is 
the founder of Bath-based web 
application and event company 
Carsonified.com, and can be found 


at twitter.com/ryancarson. 


“Following input 
from our readers, 
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changes to this 
year's event" 


It only seems like last week that 
stand-up comedian Jack Whitehall 
was hurling inappropriate jokes 

= at a packed audience for our 2010 

M Awards bash. But time flies, and 
here we are announcing the 
, SS launch of the nominations phase 
for our 2011 Awards - mental! 

Following input from our readers, we've made a 
few changes to this year's event. For 2011, we've 
increased the nominations period until 15 July. And 
that's not all. As the world's best-selling magazine for 
designers and developers, we have renewed our focus 
on talent in these areas. 

With this in mind, we're pleased to announce a 
number of new categories, including Young Designer 
and Developer Awards, as well as a Brilliant 
Newcomer category. 

No awards event is perfect, but we're continually 
striving to make ours the most transparent and 
respected in our industry, and we can only do it with 
your help! So please take a few moments to visit the 
2011 Awards site at www.thenetawards.com. 
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Don’t miss this month... 


We've scoured the web to find 
the best writers, designers and 
net gurus. From authors and 
activists to user experience 
specialists, we've got ‘em all 
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experiences for everyone by following 
the 10 principles of inclusive design. 


plains 
site using 


Campbell 
one 


experience 


net seti 


choice 
sta iewfor its 


Release: StoreMlags ë FariteMag 


/develop/discover/design 


Future Publishing, 30 Monmouth Street, Bath BA1 2BW. 
Telephone +44 (0):225 442244 Website wwy.netmagazine com 


Editorit 
A tdiorin chief Dan Oliver can.cinerehnurenet.con 

А Operations editor Tm May tomuvay@iuturenet com 

5 Arteditor Rob Bowen, roh bowenéfuturenetcom 

A stafi writer Tanya Combrinc,tanyacombrinck@funwenet.com 

5. Editor, netmagazine.com Oliver Шого, oliverlindberg@futurenet com 


Contributors 
Naomi Atinson, Alex Rey Sango, Mark Buckingham, Ben Bush, Alastair 

Campbell, Scott Chacon, Dave Chaffey Mike Chipperfield, Rich Clark, acab Creech, 
David Dašanero, David Dautech, Ryan Dawna, Alain ilə, Jen Fall, Nick France 

Dan Fret, Hugh Саде Creig Grannell lice Greening karl Hodge, Tem Hughes, Tom 
Hughes Croucher бела! Ое Kavanagh, Bruce Lawson, enn Lukas, Gary Marshal, 
Kenry Meyers, Gavin Montague, Trevor Morris, Mark Penfold, Anthony Palacios, ret 
Robinson, Andreas Shabelrikov Usman Sheikh, Fadi Shuman, Jonathan Sls Matthew 
Smith, Ryan Taylor, Cuy Utley, багай Waesmer, Wendy Tan White, Mike Walia, Phi! 
Winstanley Paul Wyatt 

Photography Daricl ma, James Locker 

Group Senior Editor Sev anat 

GroupArt Director anil 

Creative Director Tobin Abot 

itor Director im Docs 


Advertsing 
‘Advertsing Sales Diretor Nick Weatherall, 020 042 4:55, rickaveatherall@futurenet.om 
‘Account Sales Manager Ricardo Sido 020 7042 4324, icardosidell@tutrenet.com 
Senior Sales Executives Arthurs, na» 7042 4128, ros arthurs@tuturenet com 

Senior Sales Executive Laura Watson, 020 7042 4122, аа мано тепе кот 
London Sales Director аса тосе 020 042 155 maloni stoodey@iutuenetiom 


Marketing 
Brand manager Darie Bruce, dial bruce@futurensteom 
epee Kamari wi Wiña pare араа 


ication 
Trade Marketing Director Rachael Ced, rachael сосн @КАше ге! crm 


Print & Production 
Production Coordinator Craig fradoridge crip озде битле com 
Head of Production ichar Mason, hard mason@haurenet cam 


Licensing 
Head of international licensing Tm Hudson, timhucson@futurenetcom 
паа Iohz25 788255 Pan a (}1225 732275, 


Future Publishing Limited 
Publisher Matthew Pierce, matthonipirce@tuturenet.iom 
Chief Executive Officer UK Mark Wood, marcswoodhuturenet.com 


Subsciptions 
Phoneour UK hotline 2844 452552 international д) (o) 3604 251045, 
Subscribe to.net magazine online at wy mylaiotzi=magazines cac 


NEXTISSUE ON SALE:24 May 2011. 


Print inthe UK by Wiliam Gibbons & Sons Ltd, Wilerhallon behalf c Future, 
Distributed inthe UK by Seymour Dstrbuton it, 
2 East Poultry Avenue, London ECLA SPT, Tel: 0207429 4000 


= 1568 


Future produces carefully targeted magazines, websites and 
‘events for people with а passon. Our portioto includes more 
ИИ thon 100 magazines, websites and events and we export or 


I] келе ол patens to 90 countries around the word 


Mente werk for Future? 
Vist ww futurenet.comfjobs 


Future picis a publiccompany 


Chief Executive: Stevie Spring 
‘quoted on the London Stock ‘Non-executive Chairman: Roger Parry 
Exchange symbol: АЛЯ! Group Finance Director: John Bowman 
та s44 (0207042 4000 [London] 

Tel fh [01225 442244 [Bath] 


wwwlitureple.com 


НЕ 0.22. 
‘or reproduced wtheutthe writin permission of the pusher Future Punishing Limited 
[company number 20c8š89)is regstersclin England ard Wels. The registered officea! 
FuturePublishing Limited at Beauford Court, За Monmouth Street, Bath BA 28W All 
irlonstonconisinedin this magazines for information only andi, asfar as we аге auare, 
correcta the time of acing te press. Future cannot accent any responsiblity for errors or 
Trece.ucies n чис! неткен Readers are acyised to contact manufacturers ard тоіат 
Фес wih regard tothe price af prodots/services rebre iain this magazine. угы 
Submit ursalidted material to us, you zutomatically grant Future a cerce ta publish your 
Submision inwbole arin partin aeons ofthe macacing inelucinglicensad exter 
"worldwide andin any physical or digital formattirougi out the werld. Апу material you 

Š omnis sentat your rsk and, although evry care в atn, eher Future nor Re 
‘employes, agents ог subeoniractors тай Бе liable for oss or damage. 


Weare committed io опу ба, 
maqazne naper whichis derived 
fromwelimanage certified 
fovesyandchlorinefree 
manufacture. Future РУКИ 
ancitspaper suppters have been 
independently сетте т 
accordance with the rules ofthe 
FSC [Forest Stewardship Counci). 


Shore mas, 49И) 


ane 


ІҢ = Want access to all of 
A this great caren 


Subscribe today to the 
print edition of .net and 
get exclusive access to 
our digital PDF archive! 


www.netmagazine.com/shop 


The A-Z of 
ecommerce 


Ais for Actinic 
B 
C 


X 


ACTINIC 


format 


dTie POF 


om = Res Maganiies Dow 


Sion 


.net/inbox 


[inbox 


Y 


mails, comm 


Subject: University course (1) 
From: Tracy-Lorraine Law 


1 read Christopher Hussein's feedback about 
his course at the University of Leeds (Inbox, 
issue 215) with interest, but feel that perhaps 
he has missed the point. A web designer is 
quite different from someone who can “code/ 
make" websites and the former is where the 
real value of his course at Leeds was aimed, 

| have just spent three years studying 
Communications at degree level with 
Sheffield College and have finished with a 
79 per cent distinction as an online student. 
During that time the modules almost mirrored 
Christopher's experience. | didn't see the 
whole value until the end of the course. 

By applying what | learned from the wider 
study of communication, by the end of my 
study | have produced a website that reaches 
the top of the listings for my son Joshua 


s and tweets 


Law, a professional musician — beating a 
powerful ‘Joshua's Law’ from the USA and the 
footballer in terms of SEO. I used the web to 
fight O2 in a mobile mast campaign: type 02 
mast Chafford' into Google and see where 
interviews at public consultation were on 
YouTube before 02 managers had sat dawn 
for dinner, And by the end of the degree ld 
set up а successful business and created www, 
gaml.co.uk, which is listed on the first page of 
Google if you search for QAML 

Study provides you the ability to intuitively 
know how to utilise the technology through 
good design. You could then get anyone to 
produce the code for you, or learn yourself. 

Not everyone can produce effective design. 
Code is logical; good design is creative. The 
course | studied had a minimal amount of web 
design tuition. The student must seek wider 
than what is actually taught to achieve. 
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Subject: Build-off 
From: Mark Walsh 
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1 look forward to reading the Build-off 
each month and often conjure up my 
‘own mental mock-ups to compare 

to those shown. | do, however, get 
rather agitated when | see lorem 
ipsum, as it wouldn't hurt to finish 
off the web page completely and add 
in some realistic copy. What agitated 
me more in issue 215, though, was 
the mock-up of Cocoa Alternative 
Apparel. It was a product раде 

for white shorts, yet the product 
description was for black shorts, and 
of the six smaller product thumbnails 
that were meant to be a variety of 
shots of the same product, two were 
Just cut out from the main image and 
the others showed images of a blue 
top or shoes. Although | get that in 
most cases a mock-up isn't intended 


- 


to look exactly like the finished article, I'm surprised that some of your contributors 
haven't gone that extra mile to make sure that their mock-ups look the best they can 
seeing as they are showcasing their work to a large audience via your magazine. 

Time to ‘fess up, Mark: we do specify in our brief to Build-off designers that they can 
use lorem ipsum text if they like. Do other readers feel we should change this policy? 
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Subject: University course (2) 
From: James 


| think Christopher Hussein makes some 
interesting points about university degrees 
and web design. Personally | don't think that a 
university degree is as good as many alternate 
courses for the IT industry. Courses such as 
MCSA or CCNA would be more beneficial if 
you wanted to be systems admin, for instance. 

| went to uni at Leeds, met and studied 
graphic art and design, then some time later 
studied MCSA. | got my foot in the door of 
aninternet solutions company because of my 
MCSA, though, and not because of my degree 
{well that’s what | was later told), 

I'm not sure what course to recommend for 
a web designer but | would consider looking 
elsewhere than universities. 


subject: University course (3) 
From: James Edgeworth 


In issue 215, Christopher Hussein complains 
about the courses offered by the University of 
Leeds. 14 like to offer Christopher and other 
readers a different perspective. 

As a student, | found my Computer Science 
modules (at a different university) watered 
down and uninspiring. As a result, | continued 
my own web development projects rather 


Wherever you live, study online with Tho Sheffield College 
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Top marks Tiacy-Lorraine had positive 
experiences studying with Sheffield College 
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ASP & ye shall receive where's the ASPNET 
coverage, Don asks, On page 102, we reply! 


ferociously on top of university, and left with a 
far stronger, wider knowledge of development 
than anyone | knew on the same course. 

Today, as an employer, т shocked at how 
bad most students entering the industry are, 
even in London where you may expect а far 
larger pool of potentials, We're looking for 
some very strong candidates, but we have had 
people turn up who still seem like they are just 
starting out with the basics. 

To me, if you do your own projects, then 
that shows a clear interest in what you are 
trying to do industry-wise. Those who don't, 
who are presented with the question “What 
interests you in programming?” often respond 
with "It pays well | think”, Wrong attitude. 

To summarise: do your own work, and 
learn your own way. Remember, a degree 
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-net Inbox is sponsored by Fasthosts Internet 
(www.fasthosts.co.uk}, a leading UK web 
hosting provider. Since 1999, Fasthosts has 
been at the forefront of server technology 
and is an expert for reseller hasting 

solutions. From only £19.99/month+VAT 

for the first year, Fasthosts Reseller Hosting 
offers industry-leading products, an all- 
in-one control panel, exclusive reseller 
discounts and an independently certified 
training programme. All data is hosted 

within Fasthosts’ secure UK data centres and 
features unlimited bandwidth and super-quick 
connectivity. With 24/7 UK phone, online 
and email support, Fasthosts offers a reseller 
unrivalled performance, quality and greet 
value. More details at wwwufasthosts.co.uk 
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Back to basics We've dropped the CD in order to reinvest the money in a new ‘backend’ section featuring dev- 
focused tutorials, opinion and interviews (see pages 96-111). But not everyone is happy 


means nothing if you can't show your ability. 
So unless Christopher has given up on his own 
work, | have no worries about whether he'll 
make it into the industry, if that is his goal. 
We've had a lot of correspondence on this. 
The overwhelming theme of our postbag 
seems to be that taking the initiative and 
filling in the gaps in knowledge your course 
doesn't cover is a Very Good Thing. And 
self-education doesn't stop after university: 
it’s something we all need to do throughout 
our career - a point Ryan Downie expands 
upon on page 85 of this issue. 


Subject: ASP.NET 


From: Don Smy 


Hey guys: great mag, we've been buying it 
religiously for years now. 

We're an ASPNET shop and while Im sure 
you have many ‘canned’ statements about why 
you don't publish any articles about ASP.NET, 
can you give us the real reason? 

It’s obviously not related to ‘open systems" 
because you continually push Adobe products. 

It can't be because there's no market for it, 
because as soon as you look at any ‘serious’ 
Saas-based sites, the vast majority are written 
using ASP.NET. And don't tell me you don't 
cover Saas, because that would preclude 
Facebook, Twitter, Mint and so on — which 
have all been covered. It can't be that you 
don't cover server-side products, because you 
regularly feature Rails and PHP articles, 

Come on guys, | know ASP.NET is "һе 
dark side’ of website building but there is 
a very real community out there using this 
technology. Give it some page space ... please! 
You're right, Don — we haven't featured an 
ASP.NET tutorial for avery long time, and 
this is purely and simply because there 
hasn’t been space to include everything we 
want in the mag. It was for this reason that 
we decided to drop the CD and reinvest 
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that money in adding an extra 16-page 
developer section — which you'll be pleased 
to know this month features an ASP.NET 
tutorial by Microsoft’s Phil Winstanley (see 
раде 102). Of course, that decision hasn't 
been welcomed by absolutely everyone ... 


Subject: Missing the CD 
From: Darren Player 


l am a regular subscriber to .net. Unfortunately 
I'm very disappointed that you've stopped 
producing the CD that used to come with the 
magazine and provided an array of developer 
tools and tutorials. Why has this happened 
and what are you doing to replace the missing 
content and the value of the magazine? 

The magazine pricing has not decreased 
but yet it has dropped its level of content/ 
service and its monthly surprise elements 
the content on the disc provided. Whilst the 
magazine may have increased by a few pages 
1 don't really think that counts when it just 
offers page after pages of adverts 

Sort it out .net because this is tempting me 
to cancel my .net subscription altogether. 
We're sorry you feel that way, Darren. As 
we've said above, we dropped the CD so 
we could reinvest the money into adding a 
new developer section to the magazine (see 
pages 96-111). Note that we've maintained 
the same ratio of ads to editorial, so there 
really is a lot more content now. Anyway, 
we hope you'll find enough of interest 
in this issue to change your mind about 
cancelling your sub. Just like this gent ... 


subject: New developer section 
From: Michael Rindsig 


Halfway through my first subscription | had 
more or less decided not to renew it, because 
1 found the magazine too much aimed at 
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Here's what you wrote on Twitter about 
issues 214, 215 and the mag in general... 
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MOD rules Keith teels our write-up of MODX in 
issue 2145 CMS article didn't tell the whole story 


designers and not developers. Multipage 
rants on how round buttons and transient 
backgrounds is ‘SO the new black are just not 
for me. | mean, do designers REALLY believe 
|, as an internet user, would stop using, say 
Amazon if they changed to square buttons? 
Thankfully, content is still king on the net. 
Then, in the nick of time you started adding 
more pages for developers. Very informative 
indeed. If this continues | will change my mind 
about stopping the subscription. 
Glad you approve, Michael, and we promise 
to limit our obsessive cravings for rounded 
buttons to weekends and special occasions ... 


Subject: MODX 


From: Keith Penton 


Thanks for an interesting and useful review of 
content management systems in issue 214. It 
seems fair-minded in approach, but | think it 
was inaccurate regarding MODX. 

MODX is in fact tag-based, not unlike the 
example you show for ExpressionEngine, with 
elements such as [*pagetitle*] and [*content*] 
routinely featuring in its templates to refer 
to resources for pages, It also makes it very 
easy to incorporate your own PHP and reuse 
"chunks" of HTML via tags. 

MODX is well suited to small sites as well as 
large ones. And it now comes in two versions, 
“Evolution” and “Revolution”, the latter using 
more advanced programming techniques. Less 
usable UI? The developer can easily create a 
simplified interface for the website editor in 
either version, hiding the surplus features and 
rearranging the access to the needed ones. 
This CMS also benefits from a very active, 
friendly and helpful user community. 

Cheers for the feedback, Keith! We'd love to 
hear about other readers’ experiences with 
this or any other CMS. 


aw my first copy of @netmag 
today, really impressed 
 Gjayrobinson. 


1. Do the washing up 2. Pour 
a coke 3. Read the new. 
Gnetmag 4. Watch 
everything-phobic Yorkshire 
villagers on tv. 

@StuRobson 


A curry and the new @netmag 
is my nights agenda. Might 
slip in a bit of Fifa along the 
way! 

Gmark 165 


Thanks Gnetmag, for getting 
rid of the CD. Even without. 
the extra pages, "т so glad 
you've made this decision! 


@dylanparry 


Cannot believe it! Gnetmag 
this month has a pink cover, 
oh the excitement. Maybe 
next month it'll be blue or 
even purple ;) 

liz canary 


Gnetmag recommended 
agent8ball.com/ as great. 
example of html5 game. 
equivalent to Flash. Erm - try 
it on an iPad- sloppy and 
unusable 


 Gandyfield 


Reading the June @netmag 
article on Facebook graph 
development - very. 
thorough! 

‘ectraganos 


Finally got round to watching 
the #responsive #webdesign 
videos in last month's netmag 
-worth the wait! 
@iakeroot_dacign 


Finally renewed my @netmag 
subscription, Going to have to 
order back issues for the 
months | missed 
#backinthegame 


Gsarürkt. 


Having a cheeky read of this 
months @netmag. Especially 
enjoying the article on the 
Facebook Platform! 
Qsmithead123 


Nice. Gnetmag now allows 
you to download PDFs of their 
magazine if you're a 
subscriber, even back issues 
which your sub. doesn’t cover 
Gtonygeer 


@netmag Just made a little. 
blog post showing peeps how 
to get the PDFs if they stuck 
send them to -http://bitly/ 
jOFOCb and thanks again 2) 
GMarksBlog. 


Reading latest issue of. 
Gnetmag loving the URLs 
feature - perfect timing! 
Gsamanthazoek 


Latest issue of @netmag just. 
arrived. Full of great articles. 
All very relevant stuff. P.S I 
skim Gkennythemeyers piece 
@johnhenry_ie 


In my #royaltyfreebunker | 
had, a copy of Gnetmag, а 
Dandy and a Beano. For 
refreshments: Golden Wonder 
crisps and a glass of Kiora:) 
 Gadamoriley 


Yay! My kind father brought. 
me home the latest @netmag. 
2) Think I'll subscribe soon, to 

save the hassle (and money). 

Gboweruk. 


Chuckling at the first letter 
{and response) in this months’ 
@netmag about Web Design. 
courses at @universityleeds 
@stanton 


Got my April / May editions of 
@netmagtoday, wondering 
why | hadn't ordered it sooner, 
assumed it was affiliated with 
Microsoft NET Frmwk 


@danmofo 


Wool @netmag issue for June 
showed up today *happy day* 
амаз 


Reading the latest copy of 
Gnetmag. Looking forward to 
digging into the HTMLs forms 
tutorial. 


Gpasmarketing 


Oohh. My first nerdy mag, 
Gnetmag. Been wanting this 
for years! Thx @maxonmedia 
http;//t.co/cLHSCBo 
lynseydesian 


Write to us at feedback@netmagazine.com 
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Choice cuts from across the web 


shortcuts - 


Make sure you don't flick 
past any of this lot! 


20 Brains behind — | 
Evelyn Krexplainshow — ! 
he's helped bring | 
steampunk to the web Н 
via steampunktales.com | 


21 Big mouth 
As bands reform and the 
dotcom bubbles returns, 
Gary Marshall gets a 
weird sense of déjà vu 


Browser race-off 


As Firefox apes Chrome's dev cycle, Microsoft starts prepping IE10 


The browser wars have 

reignited in a very different 

manner to how they were 
fought in the 1990s. Instead of 
welding proprietary garbage to 
software, major players are racing 
to bigger version numbers and 
better support for web standards. 

Mozilla plans to match Google in 

releasing a major browser update 
every few months, while Microsoft 


development. “In theory, it seems a 
good thing. But having gone insane 
tracking Chrome’s dev cycle for the 
construction of wikiHow’s Survival 
Kit Chrome app, I'm apprehensive 
about the move. That said, the 
Mozilla ecosystem doesn't seem as 
chaotic as the WebKit-Chromium- 
Chrome world, so tracking the 
Mozilla dev cycle probably won't be 
as aggravating” 


being platform-agnostic, there were 
concerns Microsoft would try to 

tie HTMLS to its own platform. But 
Gustafson reckons Hachamovitch 
merely “spoke out of turn [...J 

unless Microsoft is planning to take 
Windows in the same ‘native HTML5" 
route as WebOS”. Principal evangelist 
for Adobe systems Greg Rewis is also 
unfazed: “The comments refer to 
work Microsoft is doing to eliminate 


22 Threaded 
From Angry Nerds to 
3D monocles, Tanya 
Combrinck rounds up 
2011's best April Fools 


28 Reviews 


The latest gear, media 


has already released a platform 
preview of IE10, showing off 
improved standards support. 


reassuring to see Microsoft move 
from IE9 right into IF10," says 


“{E10 looks good so far, and it's 


That the latest battle centres 
around speed and standards will be 
music to the ears of veteran web 
standards advocates. But Microsoft 
lobbed a spanner into the works 
when Dean Hachamoviten (corporate 


abstraction layers between browser 
and OS, allowing the browser to 
parse/render pages more quickly" 
Others remain cynical, though, 
such as developer Aral Balkan, who 
says: “I just wish IE would go away. It's 


and software reviewed, 
including Node js and 
Storejs 


Aaron Gustafson, principal of Easy! 
Designs. However, he's concerned 
about the breakneck pace of Firefox 


vice president, Internet Explorer] 
claimed IE offered the “most native 
HTMLS experience”. With HTMLS 


like an abusive spouse. It says it will 
change, but you know it’s going to 
mess up the first chance it gets.” @ 
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Google nukes 


videos from orbit z > 


User videos removed with little notice; new service ! 
to concentrate solely on search and discovery iuge 


In mid-April, Google gave users four weeks to grab their content from Google 
Video, saying all videos would be removed by May. The revelation casts 
further doubt regarding long-term reliance on cloud-hosting, where content 
remains online at the whim of a hosting provider. 


Ollie Rickma of communications, Google UK & Ireland, told .net that 
Google Vide 9 and that Google “always 
m arch videos 


е videos are hosted”, Не confirmed 
ind discovery” and added: "We 
realise this may be ai nience for some Google Video users, and меј 
apologise to them for any difficulty they encounter.” 
Developer Faruk Ateş told us he was surprised at Goo 
web friendly company and this decision is counter to th: 
as an end-user—if such a large, profitable company decides to pull the plug on 
somuch video content, with very little warning, how safe is your content on any 
other video platform? And what happens to my content on Google services if the| 
company buys a similar product and it becomes more successful? Like Yahoo 
effectively killing Delicious, this illustrates that no company, no matter its si 
a reliable and trustworthy platform” М llyons cofounder Jason Arber 4 
concurred: “Му modern life is spread across online services, and if one does the 
Google Video when I'm cn holiday, that's part of my life wiped out for 
good. Shoeboxes don't treat way!” However, Arber said he was hardly 
inconsolable to see the back of Google Video: “It’s always been a dog—l'm 


web-savvy, 


ou ti 


sad to say farewell to its choppy, blocky, wretched Flash codecs. 


е Ind news 
қ 6. 


‘ding to the ВВС, ап Nimbupani Desions has 


After years of wrandling, 


ly Georgian woman in an article remarked һе xxx do 
s facing charges after how designe п inally been approve 
bringing down internet inject incorrect default seemingly making r 
services in neighbourin values into their CSS one happy. It won't stop 
Armenia. The 75-year- Being h porn operating on ror 
old damaged fibre-optic company has provided a but 
cables while she was out — list of property/value pairs ide an 


scavenging for copper, at nimbupani.c 
disrupting all three o! 

Armenia's wholesale domains to stop 
nternet providers domain-squatting. 
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Alexa nder Ha Qe 


Tanya Combrinck talks to Alexander Hanff of 
Privacy International about the new EU ePrivacy 
directive that requires advertisers to seek consent 
before using tracking technologies 


Alexander Hanff 


Job Communications project leader at 
Privacy International 

Education Information Systems and 
Applied Social Science, Lancaster 
University 

Previous career Self employed privacy 
consultant, IT consultant 

Online privacyinternational.org, 
 Galexanderhanff 
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ле: How does behavioural tracking 
e invade privacy, and how can we solve the 
problem? 
AH: The ad networks tell us that these pieces of 
information are anonymised and harmless. What 
they don't tell people is that it’s not the individual 
pieces of information that are the issue: the real 
problem arises when the data is aggregated. The 
aggregated deta paints a very high resolution 
profile of individuals, which makes de-anonymising 
it very simple. This is a multi-billion dollar industry 
with no intention of stopping — there's no way they 
are going to regulate themselves. Legislation and 
regulation is the only solution | can see. 


net: What's wrong with the idea of using a 
browser-based technology, so people have the 
power to stop themselves from being tracked? 
AH: Any system which is opt-out, such as Do Not 
Track [a browser-based technology that enables 
users to inform ad networks that they do not wish 
to be tracked], is ineffectual, because the vast 
majority of people never change default settings, 
and are unaware that these features even exist 
Furthermore, they're probably not even aware of 
whether they're being tracked or what's happening 
to their data online. So anything that isn’t turned 
on by default ‘s pointless. The industry knows this, 
which is why they continue to push for an opt-out 
as opposed to the opt-in regime we're seeking. 
With regard to privacy in general, we're accessing 
the internet via many different tools besides the 
browser — mobile apps, for example. So browser- 
based solutions don’t even begin to address the 
digital privacy issue. 


net: So as it stands, the directive is going to 
require an optin system? 

AH: Yes. The directive is pretty good, but we 
haven't seen yet how it's going to be transposed 
into various member states’ laws. 


„net: Some people are saying there will be lots of 
boxes to tick that will annoy people. What kind of 
technical solution are you imagining? 

АН: All this talk of lots of pop-ups is complete 
nonsense. There is no requirement by the directive 
to have lots of consent forms. The requirement of 
the directive is to seek informed consent if you 
want to use tracking — that doesn't include things 
like shopping cart cookies, login cookies or other 
technical cookies. 

Bear in mind that this isn't about a relationship 
between you and the website: this is a relationship 
between you and the people who are advertising 
on that website, so if you give consent to an ad 
company, you don't need to give it again when you 
encounter ads from that sarne company on another 
site. Furthermore, the vast majority of users only 
visit a very small number of websites, and those 
sites tend to be in the top 50 websites in the UK 
such as Facebook, Amazon and so on. Most of 
those sites use very similar technologies, or the 
same companies in some instances, for advertising 
and behavioural tracking. So the number of times a 
user would be asked for consent would be small. 
There are lots of solutions that don’t interfere with 
the browsing experience — we're all used to seeing 
a little bar pop up on the top of the browser when 
it tries to open another page — we get the choice of 
clicking on that, and it doesn't interfere with our 
interaction with the rest of the site. There's no 
reason why similar technologies can’t be used to 
obtain consent for behavioural tracking. I's a very 
simple technical solution. But the industry isn’t 
interested in finding a technical solution, it’s only 
interested in continuing to push this opt-out 
regime. The reason it doesn’t want to develop a 
technical solution is because that would take away 
its excuse for continuing its current practices. 


-net: So you see a situation where you visit a site, 
and a bar pops down asking for consent to track? 
AH: In order to obtain informed consent, people 
must be given real information, so | would expect 
to see something that doesn't interfere with the 
functionality of the site that links to further 
information so users can give real, informed 
consent. Bear in mind I'm a social scientist, so 
informed consent to me has a very strict definition. 
For example, consenting to someone tracking your 
behaviour is one thing, but if that company sells 
the data without seeking permission then obviously 
that's something ese, and it’s an issue. So informed 
consent needs to be truly informed — people need 
to be given all the information about where their 
data could end up and how it might be used. @ 


"There's no way they 
are going to regulate 
themselves. Legislation 
is the only solution I 
can see" 


Alexander Hanif 
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Ж Google hamstrings 
QuickTime in Chrome 


New requirement for users to provide permission 
for QuickTime — on a site-by-site basis 


Google has changed how Chrome 
deals with QuickTime and Java 
plug-ins, requiring users to grant 
permission for them to run — on a 
site-by-site basis. 

Options enable you to always run 
the plug-in on a site or to run it once, 
but there's no global setting to allow 
QuickTime or Java to work as they 
did before, Silverlight and Flash 
remain unaffected. 

Google argues the change was 
necessary froma security standpoint, 
protecting users from ‘title used" and 
rarely updated plug-ins. 

However, even running the latest 
version of QuickTime won't remove 
the warnings. 

“This is a security feature that is 
applied to certain specific plug-ins even 
when they are up to date” confirms 
Google software engineer Stuart 
Morgan, responding to an issue report 
on the Chromium project site. 


Improve your web design skills with expert 
tutorials from leading professionals 


Web Design 


Essentials 


"Once you authorise a plug-in for a 
specific page, you wort get the 
warning there any mor 

In .net 213 we reported how Google 
will no longer support H.264 in desktop. 
versions of Chrome, favouring its own 
WebM. There are concerns that this 
latest move regarding QuickTime might 
also be part of an escalating battle 
between Google and Apple regarding 
online video 

“it’s all about business,” reckons 
Jason Arber, co-founder of moving 
image agency Wyld Stallyons 
\wyldstallyons.com). "Google's changes 
are leverage to get more people ‘nto 
the Google ecosystem, which translates 
into advertising, whereas Apple wants 
its own ecosystem where folks buy 
content through Apple's stores. 

"Its sad that ordinary users have 
to suffer because of this celestial 
warfare happening above their heads,” 
he adds, @ 
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Ж Beware the UK 
national firewall 


Government confirms meetings to tackle IP 
infringement through site-blocking 


Open Rights Group ightsgroup.org) has received confirmation 


from Ed Vaizey, Minister for Culture, Communications and Creative 
Industries, that discussions are ongoing regarding a national firewall. 

A response from еу posted to the site isgroup.org/ 
blog/2c11/minister-confirms-voluntarysite-blocking-discussions) confirmed 
and leremy Hunt (Secretary of Stat: npics, Media and 

vith key players from the d conomy on 
icloping new w. сс 
а proposal for a working group “to look a 
res to tackle online cop 
Critics have argued that site-blocking of any form is a bad ide: 
ts Gi : ally so “on a self-regulatory basis 
г where decisions are “in the 
етпе about the lack of 
mise to “include cons 


groups in fi 
Developer Faruk Ates echoes these sentiments, and tells us: "Any 
infringement on the ne sored nature of the inter: 

forcing ISPs to block certain 

nent irom people and risk losing far more 


The brains behind... 


For the ur ted, how would 
jou characterise Steampunk? 


When and how did you get 
into Steampunk? 


Steampunk Tales 


What gave you the idea 
to bring the online magazine 
Steampunk Tales to mobile? 


20 .net/july 2011 


Tell us a bit about the wr 


Overheard 


Facebook’s news 

feed is like a repeat of 
everything you saw 
cooler people share on 
Twitter already yesterday. 


hitp://twitter.com/#i/jonathan 


Haynes/status/s0112770670215108 


Things you never knew 
you never knew 


The UK's world ranking ‘or average 
download speeds in a ‘histo 
of internet usage and speed 
infographic by WebHostingBuzz. The 
USA was 30th. South Korea came top. 


The monthly cost of Adobe 
Dreamweaver C55.5 if you take out 

a UK month-to-month subscription. 
That's good for occasional use, but 
regular users will find subscriptions 
costs far more over time than buying 
the software outright. 


Business Insider's mildly controversial 
estimate, in terms of millions, of 
the number of 'active' Twitter users 
Presumably, the rest are bots t 
spam you when you mention ‘iPad 


The annual revenue that the Citi 
analyst Mark Mahaney reckons 
YouTube will make in 2012. Last year 
YouTube's revenue was about half of 
that amount, 


Сеном еее ен 


Gary Marshall’s big mouth 


Your favourite band’s back and your favourite dotcom 
bubble is being reborn. Gary Marshallis getting déja vu 


If you hang around for long 
eG enough, history repeats: 
the Conservatives return to 

wreck the few bits of the country 
they missed last time; the bands you 
grew up with do comeback tours; 
the films you saw at the local fleapit 
get rebooted and re-released; and 
dotcom bubbles come back. 

No? Groupon is apparently worth 
Ssbillion. Groupon? 

There are only three possible. 
explanations. One, Groupon has 
discovered the secrets of col 


sion 
and perpetual motion. Two, the 
tech sector has gone insane. Or 
three, investors are operating on the 
"Greater Foo! theory. 

My money's on number three, 
because we've been here before. In. 


2000, nobody really believed tha 
websites promising five-minute 
delivery of dog food and space 
shuttles were viable businesses. But 
that wasn't the point. Sure, you were 
a fool for investing in it, but provided 
you could find a Greater Fool and 
persuade them to buy all your shares 


in dogfoodspaceshuttie.com, you'd 
make money while, at least. 
The last bubble burst because the 
world ran out of Greater Fool 
We now have a new supply. 1% 
not just Groupon. Social gaming 
firm Zynga's latest funding round 
billion, Twitter was 


val 


valued at $5billion and Facebook 
at up to Ssobillion. Admittedly, 
these are American rather than 
real billions and the valuations are 
for private investors rather than 
publicly traded shares — for now, 
at least — but we're still looking at 
sites that don’t generate enormous 
sums of money being valued at 
enormous sums of money. 


It can’t last 

Facebook will probably survive 
when things go pop, albeit at 
a massively reduced valuation, 
but other sites look very shaky. 
Groupon's business is easil 
copied — it's already spawned a 
host of imitators — and if Google 


and Facebook decide to compete 


properly with it rather than buy it, it's 
toast. The same applies to location 
based check-in sites: both Google 
cebook are finally putting 
some effort into their own checkin 
systems, Latitude and Places. 
Facebook gaming depends 
entirely on Facebook's goodwill, 
which is a little bit like riding around 
оп the back of a crocodile while 
covered in bacon and telling yourself 


am 


that the crocodile is vegetarian. 
Bubbles are bad news. They distort 

the market, with VC-funded sites 

driving genuine businesses — who 


don't have a magic money fountain 
to rely on — out of markets. Look at 
Amazons destruction of bookshops: 
it could afford to undercut everybody 
because investors let it lose money. 
Worse, they harm ordinary people. 
The money being invested is other 
people’s, usually from pension funds. 
When the dotcom bubble went, the 
financiers survived; ordinary people 
took the hit. When the credit crunch 
kicked in, the financiers sui 


rest of the planet took the 


be a couple of years awa 
bubbles burst. We already know how 
this one ends. 


Gary Marshall has been writing 
for .net since the Stone Age. www. 
bigmouthstrikesagain.com 
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A pleasing aspect of the 
o digital age is that physical 
slapstick has been replaced 


with online jokes, sparing most of 
us the annual humiliations of silly 
April Fool's pranks. 

Perhaps the meanest joke this year, 
for anyone who forgot what day it 
was, came from TechCrunch, who 
announced that Spotify was 
shutting down in Europe in 
order to launch in the US 
(netm.ag/spotify-216). It 
quoted an email 
explaining that “the 
decision to close down deli 


Nerds herded Angry Nerds spoofs the 
popular mobile game of the avian variety 


For althe links on. 
thispage, visit 


our European operations to fund a US 
launch was, frankly, a no-brainer” and 
that customers who had paid to 
access the service would be fairly 
compensated. “To all subscribers with 
fewer than six months of their 
subscriptions left to run, I'l be 
sending a signed Spotify hat and 
Tshirt. To those with more 

than six months, I'l 

also throw in a 

mouse pad and 

pen” 

Ryanair 
announced it 
would be 
providing child- 

free flights (netm. 
ag/ryanair216] — 


Partners purged Kodak promised to 
identify exes and remove them from pics 


with a regrettable ex partner, Kodak 
introduced ‘Relationshiffft APP — 
Automated Person Purge from Kodak’ 
— ап app that removes exes from your 
photographs (netm.ag/kodak-216) 

AdBlock Freedom, the next 
incarnation of AdBlock, launched an 
augmented reality headset that 
promised to remove adverts from 
‘real life’ (netm.ag/freedom-216) 


actually, why is this a 
joke? — and Newslite ran a story 
about a new Facebook setting that 
removes status updates about 
weddings and babies, and instantly 
blocks anyone who uploads an image 
of their child as a profile picture 


(netm.ag/facebook216). For those 


July 2001 


The web 10 years ag 01 


downloads. 
suspenders” 


опіпе dating. 


Psycho porn 


Lego men abuse each other. 
Chairs go X-rated. This is the 
world of psycho porn. 
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50 internet sex symbols 
Meet the net's most desirable 


“| imagine you in stockings and 
Revealed: the naked truth about 


Online porn stripped bare 
Why the adult industry could put 
an end to your net freedom. 

The AZ of internet sex 
We take a bizarre ride through 
the web's red-light zones. 


Toshiba promoted a new 3D monocle 
as “one-eyed 3D so real, you'd think 
you were using both eyes!” (netm.aa/ 
tosh-216). And Atlassian created 
Angry Nerds, “one of three nerd 
mabile games alongside Nerds with 
Friends and Plants vs Nerds” (netm. 
ag/angrynerds-216). 


Robert L Tools becomes the 
world's first recipient of a fully 
self-contained artificial heart. 
Surprise tennis champ 

Goran Ivaniševi becomes the first 
(and so far only) wildcard to win 
the men’s singles at Wimbledon. 
Jefirey Archer goes down 

Jeffrey Archer is sentenced to four 
years in prison for perjury and 
perverting the course of justice. 
Genoa police attack 

G8 demonstrators are brutally 
assaulted in their beds by police. 
Chart toppers 

The Way To Your Love by Hear'Say 
and Lady Marmalade by Christina 
Aguilera, Lil’ Kim, Mya and Pink. 


THE BRADS. 


BRADCOLBOW.COm 


THAT DIDN'T CRAP, THIS 
WORK. ISN'T WORKING 
ы, — EITHER. 


ARRRRGSG, 
WHY DOESN'T 
THIS WORK! 


IT WORKED!!! 
| WOOHOOOOO! 


, OK, LET'S TRY | 
‚ THIS AGAIN. | 


THE LIFE OF A WEB DESIGNER 
15 HOURS OF FRUSTRATION, 
PUNCTUATED BY BRIEF SPELLS 
OF EUPHORIA. 


S Download| ШШЕ шн 


yomains 


* Free IMAP/POP3 Mailbox 

* Unlimited Email forwarding & Email addresses 

* Full DNS control & free webpage builder 

* Easy-to-use control panel to manage all your domains 
www.daily.co.uk/domain-names 


Professional Microsoft Email on-the-go with all these features & more 


£1.99pm 


Complete suite of reliable web hosting solutions to suit your needs 


rivate ervers ғ» 


Choice of Windows 2008, Windows Hyper-V or Linux with choice of control panels 
Lightening fast Intel Dual Quad Core Xeon VPS optimised Processor 

* Guaranteed RAM, full root access, install any software 

* Host unlimited domains, websites & email - ideal for resellers & developers 


www.daily.co.uk/vps 


j Ec soft* A 
C. Exchange 210 WindowsServer Great Hosting... All Daily, Every Daily ! 


Sales Hotline: 
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Jonathan Snook „оок 


The Canadian writer, speaker, blogger and 
designer/developer extraordinaire answers 
your questions on choosing software, getting 
inspiration and what's holding back the web 


Jonathan Snook 


Job Front-end engineer and prototyper 
Company Yahoo 

Previous career Freelance designer 
and developer 

Online snook.ca, @snookca 


" 24 .net/uly2011 


@optimiced: Do you use Fireworks today 

Ë ‘ee 4 (for web/design)? If yes, how does it fit in 
` your workflow? 

25: ме used Fireworks for many years and have 
always felt it a superior tool to Photoshop for web 
design and prototyping. For personal work, | use it 
from wireframing through to full designs. At work, 
the software of choice is Photoshop, although we 
do vary little with the actual Photoshop files any 
more. | used to have to go in and slice up this or 
that but with CSS3, we've eliminated a lot of that. 


@designshifts: Which design/dev 
Ei software (open or not) has stayed with 
you over the years? 
15: When | was on Windows, | stuck with UltraEdit 
and Dreamweaver rather religiously. When | 
switched to Mac, | used Textmate but a few months 
ago | switched to Vim (and MacVim) and haven't 
looked back. It's heavily customisable. 


Æ Qwebtrivia: Which features are missing 
Ф. or inadequate in current CSS3 modules 
and implementations? 

JS: Layout is stl! the biggest hurdle. We have hacky 
tricks like float-based layouts but nothing gives us 
much power in the way of magazine-style layouts. 
We have display:table but it's a limited form of what 
HTML tables gave us. We have absolute positioning, 
which can be powerful if you don't have to worry 
about the content having an effect on document 
flow, Multi-columns is, in my opinion, of limited 
utility on the desktop web, although I’ve seen 
better use cases for it on tablet based sites. FlexBox 
gives us a little more power and it'll be great to see 
that settle down as a W3C spec and find universal 
support. In the next two years, FlexBox will be 
where we'll see layout design trending to. IE10 
Preview has introduced Grid Layout, which is where 
things really get interesting. It's finally allowing for a 
much more powerful system for layout. 


ЕШ eaerotwist: What do you consider the 
Е biggest barrier то progress on the web 
Fight now, and why? 

JS: The browser. It provides us the platform that we 
develop upon and until it gives us the features we 
want, we're stuck developing for what we have. 
Even if one browser comes out with the latest and 
greatest, we need to wait for the lowest common 
denominator to catch up. That means waiting for 
other browsers to implement features in a consistent 
way and for users to upgrade their browsers. 


„ GAdamHuxtable: When looking for 
design inspiration what is the most 
successful way of getting some? 

JS: The first step for me is to get the layout down. 

Throw everything anto the page and just find a page 

structure that's going to work. Once that's in place, | 

can begin to focus the design, playing with hierarchy 
and contrast to direct the user to the content that 
matters. Often, "Ц have an element — something 

I've seen on another site, on a building, or a street 

sign — that's something that | want to incorporate in 

the design. 've talked a bit about inspiration on my 
blog, Snook.ca (snook.ca/archives/desian/desian, 
inspiration), and haw | incorporate those elements 
into the design. 
It's easy to find a site and want to apply that part 
and parcel to our own projects. However, whenever 

I've tried that, it's aways felt fat. It doesn’t have 

the same personality as the original. Also, | highly 

recommend keeping a log of things that catch your 

interest when you're not in the process of designing. 

Store them away and come back to them when you 

really need the inspiration. 


@pavelmocan: What's the best way to 
e learn how to architect apps that can scale 

nicely, add modules to, and soon? 
JS: | assume you mean back-end scalability (versus 
design scalability), for which fd recommend checking 
out the High Scalability blog (highscalability.com) or 
Planet Performance (yww.perfplanet,com), which 
aggregates from a number of sources and includes 
front-end performance. 


Gtoepoke co uk: Have accesskeys had 


$ i their day? 
JS: | think they have. lm not sure they ever 


really had a day. ARIA roles and more thoughtful 
consideration for widget control and page 
navigation allows for web applications to feel and 
respond more like desktop applications while still 
being enriched with greater semantics and usability 
for screen readers, Accesskeys are too limited in 
scope and have poor discovery to be of much use 
within the web applications being built today. 9 
Follow us on Twitter at @netmag 


"| used to have to 
slice up this or that 
but CSS3 eliminates a 
lot of that" 


Jonathan Snook 


c(erel М Ессе 


‘Upcoming 
events 


The best web events of the month for your diary 


23-25 


TechCrunch Disrupt NY 
New York 
petm.ag/tcrunch-216 
Preceded by г 
Hackathon on 21-22, 
Disrupt will have a 
great line-up and focus 
оп new startups. 


30-1 


RallsWayCon 2011. 
Berlin 
netm.ag/rails216 

and power 
workshop sessions on. 
testing, best practices, 
NoSQL with Ruby on 
Rails 3, success stories 
and lots more, 


6-10 


WWDC 2011. 


The Apple Worldwide. 
Developers Conference 
showcases new things 
1105 and Mac OS X 
with the aid of over 
1,000 Apple engineers. 


24-27 


Web Directions. 
Gmedia 011. 
London 


development talks ard 
workshops from the. 
professionals 


31-4 


Computex 2011 
Taipei City, Tai 


netm.aq, 
One of the world 
largest computer. 
expos, with hundreds 
of exhibitors and 
products - and over 
36,000 buyers. 


DIBI 2011 
Newcastle upon Tyne. 
dibiconference.com 
Two-track web 
conference with. 
excellent speaker line 
up including Blaine 
Cook, Rich Thorn 

and Inayaili de L 


25-27 


WebVisions 2011 
Portland, US 
jsionsevent. 
Presentations and 
workshops on web 
design, technology, U) 
and business strategy. 
Speakers include 
Aaron Gustafson, 


Augmented Planet 
Event 
London 


bada and oth: 
mobile develope 


The Inspire Conference 
London 
netm.za/inspire-216 
Talks on technology, 
entrepreneurship, 
creativity and society, 
with an excellent fine- 
up including Aza 
Raskin and Taria Krim. 


26-27 


Microsoft Web Camp. 
Chicago 

Chicago 
webcamps,ms. 

Learn how to build. 
websites using leading. 
арр» such as ASP.NET 
MVC, WebMatrix, 
Obata and more. 


2-4 


Interlink Conference 
2011 

Vancouver 
neimag/intertink-216 
Inspiration, innovative 
ideas, cutting edge 
development tools and 
talks from some of the 
biggest names, 


9-12 


Flash and the City 
New York 

Паб несу сот 

Thiee-day 

Piso ЕВ 
workshop Event of 
ur TA 


27-28 


WhereCamp EU 2011 
Bariin 

wherecamp.eu 

Geo unconference for 
Europe, covering 
everything location- 
based, With attendees 
from Google, Nokia 
and more. 


28 


Sketchcamp. 
San Francisce 
sketchcamp.com 
A user-generated 
unconference with 
speakers and 
workshops on using 
sketching techniques 
for UX design. 
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GoRuCo 2011 
New York 


The Gotham Ruby 
Conference is a single 
track event that hopes 
to have six talks from 
some of New York's 
Rubyists. 


EXPLORE 
DISCOVER 
CONNECT 


The ReadWriteWi 
AWAY Summit NYC 
New York 

Conference on the 
future of the web, with 
speakers including 
Jason Calacanis, Emily 


Conference on web 
and enterprise 


development for 
project managers and. 
devs covering Java, 
cloud, Agile and more. 


An Event Apart 
Atlanta 

Atlanta 

netm.aq/ 
eventapart-216 
Two-day conference 
with speakers 
including Jared Spool 
and Jeffrey Zeldman. 


pps ‘2. 
Portland, US 


including technical 
programme and 
business topics. 


Frontiers of Interaction 
Florence, Italy and 
online 
netm.aa/frontiers-246 
Innovation conference 
in italy on disruptive 
technology, startup 
tools and web design. 


Front-End Design Conference 


Ampersand 
Brighton 
ampersandconf.com 
An affordable web 
typography conference 
operated by Clearleft 
design agency for web 
designers. Follow 
Gampersandcont. 


UX Australia 2011. 


TypeTalks 2 
Poznan, Poland 


Two-day symposium 
on typography with 
daytime lectures, 


presentations and 
parties in the evening. 


snet/july 2011 
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Get your event. 
publicised! 


28-29 


The Quantified Self 
Conference 2011 
Mountain View, US 
netin.aa/self-215 
Conference for 
designers and 
Inventors to shan 
explore and discuss 
selftracking projects. 


зге! 


SemTech 201: 


The world's largest 
conference for those 
interested in semantic 
technologies. Five days 
of panels, tutorials, 
news and launches, 


UXcamp Europe 2011 
Berlin 
uxcampeurope.org 
Focus on information 
architecture, 
interaction design, 
usability engineering, 
visual design and 
prototype engineering. 


25 


Call today for FREE instant activation 


0844 583 2409 
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INDUSTRY LEADING TECHNOLOGY 
FOR OVER 10 YEARS 


THE COMPLETE 


RESELLER 


(0 
WEB HOSTING PACKAGE В 


Start making money with a partner you can trust 


Take advantage of exclusive discounts on our reseller package and you can offer your clients more, 
while you pay less. You'll get an all-in-one control panel, independently certified training and 
the reassurance that we host your services in our own secure UK data centres. 


Benefit from reselling industry leading technology 
with exclusive discounts 

NEW OneClick Installer (Linux only) 

With over 60 free apps, including WordPress, Joomla & Drupal 

NEW Secure online backup 

Complete protection for all important data and files 
NEW Mobile website builder 

Quick and easy tool to create websites for mobile devices 
NEW Business broadband 

With download speeds of up to 40Mb 

5% OFF The UK best spec virtual servers 

Hamess powerful cloud technology 

5% OFF Powerful dedicated servers 

Get up to 32GB RAM and 24 Core CPUs 


бе Magazines Downloatl 


StoreMagscom Fi 


FOR THE FIRST YEAR 
1 MONTH CONTRACT 


с < < 


For more information visit: 


fasthosts.co.uk/reseller 55 
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*Latest 
software 


New web 
design tools 
reviewed 


Marcus Westin's 
Store.js solves two 
problems at one 
stroke, giving you a 
simple API that works 


Web server 


Node.js 


sawi] 
Store.Js 


Fixing the holes in HTML55 local storage 


Web github.com/marcuswestin/store[s 


Price Free 


System) JavaScript toolkit 


Cookies are no longer the only game in 
© town when it comes to persisting data 

ona client’s machine. But the arrival of 
localStorage — the НТМІЅ replacement 
without issues. 

First up is the fact that older browsers have 
ro inkling what you're talking about when you 
call for data to be added to something called 
‘localStorage’. Though up-to-date versions of all 
the majors are very accommodating, the majority 
of users are not using these versions... 

The second problem is that the system has its 
own set of problems that need to be overcome if 
the API is to be easily usable. 

Marcus Westin’s Store js solves both problems 
at one stroke, giving you a simple API that falls 
back to whatever works on the current machine. 
It also serves up a sensible syntax, so you don't 
have to worry about everything you store (ie 
numbers) being converted to strings. 


not 


It scales without losing power — Node.js promises great things 


Web rodeis.ora. 
Price’ Free 


System Unix/Linux 


Web development is constantly awash 

with new and impressive-sounding 

buzzwords and generally they come to 
nothing. However, Node.js could be one of the 
few to make a real difference, particularly for 
large, popular websites where managing crowds 
of simultaneous connections is a major issue. 

Node;js takes JavaScript’s asynchronous rubric 
and transfers its capabilities to the web server. Built 
atop Google's V8 JavaScript engine, it provides an 
event-driven (just like JavaScript) /O framework 
‘intended to facilitate multiple connections without 
either threading or losing CPU time to code which 
blocks further processing while it executes. 

What's all this about blocking? Well, if, for 
example, you hand a request to the server that 
contains a MySQL query, until the results are 
returned from the disk, your application just waits. 
And during that time no other processes can be 
handled. This is blocking. 
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Apache gets round this by threading each new 
request as it comes in, but this can be expensive 
since each new thread requires its own memory 
allocation. Node uses the familiar JavaScript trick of 
а callback method to avoid this problem. 

Node's creator Ryan Dahl describes the simple 
stack, which Node runs, as ‘great at idling’ A call 
comes in for a request, Node assigns this a callback 
function and passes it off to be handled at a lower 
level. Then it drops back down to an idling state, 
waiting for new calls te come in. 

The next new call could be for some data held 
in memory (like a static page) and this can be 
thrown straight back to the client. Then, when the 
previous function finally comes back with the data 
we asked for earlier, the callback notifies Node, 
which loads it up and fires it back to the first caller 
before closing down that particular process and 
returning to idle/waiting. So very few CPU clock 
cydes are wasted. 

Greater simplicity means greater strength without 
any loss of flex. And by adopting a combination of 
UNIX and JavaScript terminology, Node should be 
partially familiar to most web developers. 

Don't miss our Node js tutorial on page 106. 


Release Storelilage ë FantaMag 


Simple solution It may not look like much but store js 
makes so much possible and easy 


Against 
Yet more js includes 


imple syntax 
2 Safe fallback 


As often happens with useful new 
stuff on the web, localStorage has serious but 
fixable problems when you actually come to 
use it. Store js implements those fixes. 


Move over Ruby Server-side JavaScript is about to 
have its day, if Node.js has its way 


2 Simple premise 
$ lavaScript/Unix syntax 


Against 
Still changing — fast 


An interesting system, and one which 
is getting a lot of attention at the moment. 
The future of real-time and highly scalable web 
applications could be somewhere nearby. 


F farmat 


garies Downicad i True POF 


gecon = Fes h 
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Xara Web Designer 7 Premium 


Build sites without code with this flexible WYSIWYG tool 


Web wwwsara.com/uk 
Price £89.99 


System pc 


The essential thing with a WYSIWYG 

system like Xara Web Designer is that 

the people making it are committed to 
adding new features and keeping you supplied 
with up-to-date components that can be dropped 
into place whenever they're asked for. 

Xara has always been strong on this front 
and with version 7 the standard remains high, 
Animated transitions, rapid cross browser previews 
and a selection of new templates are all good, but 
the new ‘eye catcher’ widgets take the biscuit. 

“Can my site have one of those menu things 
that’s like an accordion?” If you receive a request 
like this and you don't have the coding skills 
required to make your awn version of this most 
desirable of gadgets, what can you do? 

It's no good suggesting a nice interactive 
Google map, and getting someone to do it for you 
seems to defeat the object somewhat. No, if you're 
relying on your software to this degree then you 


š 


Formstack landing page builder 


Web wwwiormstack.com 
Price From $29/month 
System Web app 


The problem with forms is that they take ages to 
code, then you've got to process input, act upon 
the responses and store the data. And once you've 
got a form, what do you do with it? Building a 
handsome-looking landing page is probably the 
last thing you want to do. 

Formstack’s approach is heavily wizard-based 
with drag-and-drop as a secondary function, 
so you'll need to plan ahead for both form and 
landing page. The system seems solid and the 
features are many but usability is not quite there. 


Verdict If you have a ton of forms to create and 
you want a snappy landing page to house them, 
Formstack could be the answer to your prayers. 


need a package that looks after itself, and you. A 
package with standards. 

Xara 7 Premium adds proper FTP browsing, 
‘magic snap’ image alignment and HTMLs video 
to the toolset. But it's the new components and 
templates that offer users the most enticing and 
promising possibilities, 

Accordions, slideshows and zoomable image 
inspectors are okay but the 'ernbeddable website" 
widget has to be the most ambitious add-on. This 
pretty much does what it says on the tin, giving 
you the ability to integrate blogs and mini-sites 
into the fabric of page. It’s almost post-modern. 

Obviously there are limits to what can be done 
with a visual-only design package but you can 
go a very long way before encountering serious 
problems. Ecommerce, video galleries, jazzy 
interactive slideshows and the like can be rapidly 
put together without worrying about compatibility 
because it all comes from the same ecosystem. 

The same is true for browser support — Xara 
takes care of all that. It’s this aspect, which code- 
savvy designers would most envy, that regular Xara 
users completely overlook as they start chopping 
corners of the latest set of templates. 


UI design/prototyping ae 


[m laus 


Axure RP 6 Beta 


Web www.axure.com/ 
Price 5580 
System PC/Mac 


If you've ever got hallway through the production 
of a site only to realise that certain foundational 
decisions were misguided, then you know well 
the value of wireframing and prototyping. And, 
though it has a ‘business’ feel to it, Axure is right 
there with you 

The V6 beta adds a new ‘sketchy’ mode, global 
guides and location/style tool tips to the wireframe 
module, Meanwhile, prototyping has been beefed 
up to look more like a finished product with 
animations, functions and draggable interactions, 


Verdict It may lack colour but Axure feels 
lightweight and streamlined, resulting in clearly 
defined models and prototypes. 


Release: StoreMlags ë (Рала 


Regular updates xara keeps you well informed about 
the look and feel of your site 


Against 


Reqular updates 
Easy to use 


Lack of flexibility 
Template feel 


A no«ode system for producing 
websites that look up to date, this does just 


about anything you could be asked for. Most 
sites could be completed within 48 hours. 


UI design/prototyping 


PUNCHCUT 


Punchcut toolset 


Web netm.ag/punch-216 
Price Free 
System PC/Mac 


These days, digital content is deployed to a highly 
varied ecosystem of devices. From mobile phones 
to TV screens via tablets, it's difficult to keep up 
with all the different ways your work will be seen. 
Or not, if you get some crucial resolution or screen 
ratio wrong. 

Design agency Punchcut's solution is a set of 
PSD templates for just about every device you can 
think of. Now you can mock up your own device- 
specific productions and hopefully avoid those 
embarrassing resolution-dependent faux pas. 


Verdict You can't ignore the diverse manner in 
which your content will be consumed. This set of 
files and charts will help you manage it. 
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*kLatest gear 
this month 


Cowon J3 MP3 player 8GB 


PRICE £190 
cowonglobal.com 


This touchscreen MP3 player also 
plays videos, has an app for your 
pictures and documents, and 
comes with a notepad in which 
you can make freehand notes and 
sketches. It's a good, responsive 
screen and a great accelerometer, 
so the display flips quickly between 
orientations. There's also a MicroSD 
slot ifyou need more space. 


Verdict The music player interface 
takes a bit of getting used to, but 
the sound quality and screen 
won't disappoint. 
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Boba Fett headphones 


| Price 5:99 


These on-ear headphones have 
been styled in the distinctive 
turquoise and maroon colour 
scheme of Boba Fett, and feature 
some nice artwork that kids (young 
and old) will love. They sound 
pretty good, too. We found them 

a fairly tight fit on an average sized 
head, so they could also work well 
for a child, 


Verdict Do not underestimate the 
boom-power of these awesome 
headphones. They out perform 
much pricier models. 


4 


Advent Vega tablet 
PRICE £199.99 


myadventvega.co.uk 


A 10.4in Android tablet for under 
£200? Advent has pulled it off, 

and it’s not done a bad job of 

it either. Theres a capacitive, 
1024x600 screen, it's powered 

by Nvidia's Tegra 2 T20 processor 
andit runs Android 2.2. No home 
button or 3G connectivity means 
Google won't allow it access to the 
Android Market, though. 


Verdict Considering the price, it's 
not too heavy or chunky and the 
screen is responsive and looks 
good. No Gmail app though. 


я Leaf tie cable tidies 


РЕСЕ? for 12 


suck.uk.com 


Tidy up your cables in style with 
these leafy grip ties. They're 
permanent grip ties that are green 
on the top and yellow at the 
tapered end, just like a young plant 
shoot, They can be used inside or 
outdoors to hold things in place, 
or just for decoration. Check out 
the Suck website for lots of other 
interesting stationary. 


Verdict A quirky design that spices 
upan otherwise dull object. The 
website suggests using them to 
identify your luggage: good call. 


fv 
Die 


LG ЛООР ЕИ 


CLIMATE touchscreen gloves 


£20 


Use your touchscreen devi 
chilly places with these stylish 
gloves. The material is thin a 
stretchy, but contains wool so 

that it’s warm. Special drirelease 
technology apparently makes 

them dry four times faster than 
cotton and keeps them in shap 
and smelling fresh. Perfect for a 
British summe 


d 


Verdict Warm yet thin fabric with 
rice finger grips, but we wish 
they'd put conductive material on 
the second finger. 


Buffalo MiniStation 3.0 500GB 


£70 
www.buffalo-technology.com 


This dinky drive uses SuperSpeed 
USB 3.0 technology to achieve 
transfer speeds up to 10 times 
faster than USB 2.0. Buffalo's 
TurboPC and TurboCopy tools 
speed things up even further, 
making this a seriously fast drive. 
There's also encryption software to 
keep your data safe, and a backup 
utility to automate things. 


erdict Very small, thin (just 
14mm} and light, and comes 
with a useful suite of software for 
speeding up your data transfers 


rw ww w w 


UXPin paper prototyping kit 
$19.99 


Sometimes it's good to do it the 
old fashicned way: these paper 
website elements can be arranged 
and rearranged so you can perfect 
your design. The pages of the pad 
are printed with a grid, and the 
interface elements are gummed 
much like sticky notes so they can 
be peeled and positioned. There's 
also a kit for mobile site design 


ct A great way to spark 
your creativity by getting away 
from your screen; also good for 
collaborative working 


Cisco-Linksys E4200 router 


In theory, this router can deliver 
speeds of up to 450Mbps, but 
you'll need to have the right 
equipment at the ather end to 
receive such a blazing-fast data 
stream. | you don't have it built 
into your system, Trendnet has 
just released the first 450Mbps 
Wireless N USB adaptor, which 
would do the job nicely. 


Verdict Even with the right 
equipment 450Mbps doesn't 
always happen, but this is still a 
very fast router with good features. 
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Create your virtual server today at: 
fasthosts.co.uk/virtualservers 


Ax = An 
INDUSTRY LEADING TECHNOLOGY D 
FOR OVER 10 YEARS Е: 


HIGH PERFORMANCE. * 


VIRTUAL 
SERVERS 


New 


working across multiple servers 


Powerful Cloud technology 


Providing high performance dedicated resource to run 
demanding email, web and database applications. Giving 
you complete flexibility to customise RAM, hard disk and 
CPU resources at any time - reducing your business IT costs. 


Our state-of-the-art Data Center on Demand virtualisation 
technology eliminates downtime by instantly switching 
your server to new hardware in an unlikely event of a 
service interruption. 


Poweredby 25 Windows Serverzoos 


& SG servers © Se ШЙ 


Parallels 
Plesk Panel 


Reasons to buy a Fasthosts virtual server: 
w Best UK spec 100068 hard disk space and 16GB Guaranteed RAM 


w RAID protected SAN storage with instant automaticfailover — 
w 99.99% network uptimet 

Resource monitoring with email & SMS alertstt 

v Easily customise your resources and upgrade on demand 
v SSL certificates included free forthe first year* 

w Full remote admin-level access 

Optional Plesk control panelto run multiple websites 
w Microsoft” Hyper V™ 

w Choice of Windows 2008 R2& Linux 

w Secureand privately owned UK data centre 

24/7 UK support and onsite engineers. 


FREE automatic setup Unlimited bandwidth + 24/7 UK phone & online support 


Call us nowo 


0844 583 2432 


fasthosts.co.uk/virtualservers 


Great 


The Gr 
Exhibition 


tomet 


gaies Download th True POF 
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Hot 
mobile 


apps 


9 5299 PLA iOS, Android 


Colour blindness sufferers rejoice: this filter for your 
phone's camera displays the world that ‘normals’ see 
so you can make tasteful palettes for your website. 
It works by making it easier to differentiate certain 
colours, and is optimised for the most common form 
of colour blindness, anomalous trichromacy. 
РА те. 

Colour blindness sufferers love it and it can 

be tweaked for those with rarer conditions. >. Q 
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Color 


Free 105, Android (coming soon) 


colorcom 


The news of this app's $41million pre-launch funding 
created a massive splash, so expectations for this one 
are high. 11% for sharing photos and conversations 
with other users near your location, providing the 
exciting possibility of making connections with people 
you could actually meet in the flesh 
/ Бе 

The proximity feature is both a strength and a 

weakness: there need to be lots of users in your area. 


Wiregoggles 
£0.60 ШЦ] Android 
Appbrai 


om 


This awesome app translates what your camera sees 
into colourful real-time wireframes. Unsurprisingly it 
requires quite a bit of processing power to pull this 
off, so you'll need a fast phone to get the best out of 
it. You have to get the paid version if you want to save 
any of your images, but it’s a bargain at бор. 
А = 

There are 16 colour schemes and the paid 

version can export wireframe videos as WebM format. 
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Treats for your tablet 


Fargo 


[d The Font Game 


Verdict 


BIG 


NEWS 


Big News 


Verdict 


Did you know 


you can put your | 
ad on Google? e OU PU Gai 


These guys can help you do it 


See those little men holding the sign? Hard at work for Google, Diano, 
making sure your ad is in front of people searching for your product. 
Thousands of businesses of all shapes and sizes win new business 


w. ans 
етра ie 07908 Sarviceg, 
every day with the simple-to-use service called Google AdWords. ена 


Storag 
Remova ы luliong 


How does it work? 


Choose a few search terms related to your business, plus your daily Relocation Angel 
budget and the amount youre willing to pay when someone clicks yh ie Gan rate yo 
your ad. When customers search one of your terms, your ads may "atone get aro 
appear next to the search results. аме p ше Мо 
— “рю 30% ving 
Save money — om occ removal, coat 
— “е сеш 
* Try it for free - with £50.00* FREE Google AdWords advertising — 
for business users**. No minimum term or commitment. 
* Unlike directories or classifieds, you don't pay to be listed 
E - you only pay when a potential customer clicks on your ad 
5 So, if you choose to рау 25p per click, this voucher covers you for 
L 200 new visitors to your site! 
a + It works fast - your ads can be up and running within minutes. 
Ë Target them to any town, region, country, or even the whole world. 
i 
Š Voucher missing? 
Don't worry, someone in 
š have beaten you to it 
3 make sure they're claiming Put these little guys to work 
E y me 1 
č £50.00° FREE advertising Tor your business today 
а Visit google.co.uk/ads/start2011 and 


with Google AdWords for your business. 
follow the step-by-step instructions. 


g 


No minimum term or commitment. 


Or call 0844 338 0353 to get your 
ads built by Google specialists, 
and 40 days follow up support. 


оге 


**Terms and Conditions apply. 
billing addi А t a 2th d moti 
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The latest 
hot new 
releases 


ASSASSINS 


CREED 
nes š 


АД ТА 


Professional 
Web Design 


Volume 2 


(аә) Assassin's Creed: (37) symbol (8-0) Professional Web 
Brotherhood £2250 Design Volume 2 


£49.99 Laurence King €730 

Ubisoft Smashing 
[ШТ] Microsoft Paperback Magazine 
Windows, PlayStation 3 Anyone designing icons eBook (PDF, epub 
and Xbox 360 or logos will benefit and Mobipocket) 
Just released for PC, this is from leafing through this Twenty super articles 
а direct sequel to Assassin's massive, comprehenshe covering the current state 
Creed I, picking up where — catalogue of symbols with — of web design, web design 
its predecessor left off details of who designed — trends, user experience 
You play late 15th-century them, when and why. design, responsive web 
master assassin Ezio The bulk of the book % design, CSS3 and HTMLS. It 
Auditore da Firenze, and — dedicated to showcasing һе an indication of how 
steal your way through over 1,300symbols, but web design could evolve in 


Rome in а bid to overthrow — there are also case studies the near future, equipping 
the residing pope’scorrupt detailing the development the reader with а sense of 
regime, mostly by stabbing — process of both classicand ^ which developments to 


people in the throat, recently designed symbols. keep an eye on. 
Verdict We loved Verdict А fascinating Verdict А convenient 
pulling off parkour moves book that's bound to way to read some of the 
while knifing people. If inspire any designer, Easy тох important articles on 
you'rea fan of the series, to jump into; perfectior Smashing Magazine in a 
this won't disappoint. kickstarting your creativity. polished, revised form. 
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FAST AND 
FRI 


Optional Plesk 

Complete root access 

iPhone app control panel 

No minimum contract 

30 day money back guarantee 


WEB HOSTING VPS HOSTING DEDICATED SERVERS HOSTED EXCHANGE 

Reliable business web hosting located ^ High performance UK based VPS Dedicated resources for optimum Connect, collaborate and share with 

in our UK based datacentres. hosting with unmetered traffic. performance, Hosted Exchange, 

» Free Instant Set Up » Free Instant Set Up » Dell or HP branded servers » Exchange 2010 

» Choice of cPanel or Plesk » Unmetered traffic » Full remote root access » Huge 25GB Per Mailbox 

» Choice of Windows or Linux » Choice of Windows or Linux » Choice of Windows or Linux » Award-Winning anti spam 

> No minimum contract » Full remote root access » Unmetered traffic on our Pro » Mobile email ‘push’ technology 
» 30 day money back guarantee » No minimum contract Dedi Servers 


from £4.95pm ex VAT from £14.95pm ex VAT from £59.95pm exVAT from £7.95pm ex VAT 
per mailbox 
30 DAY tUi 30 DAY Ин 30 DAY ut 


www.intrahost.co.uk sales@intrahost.co.uk 0800 3213815 


2. 
© intrahost Ка 2011. All prices exclude VAT unless otherwise stated. 
баксы ohn inen € Ceara an eat = intrahost 
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(3! 


on 
‘het/feed/big_ question 


What are your 
views on the term 
‘web design’? 


In last issue’s Big Question, 
Reading Room’s CEO 
Margaret Manning sparked 
a discussion on Twitter 
with her argument that the 
term ‘web design’ should 
be abandoned. What do 
our other experts think? 
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E Stu Collett 
T UX design director 


www.superuserstudio.com 


‘Web design a rather vague and out- 
dated expression of what many of us 
now do. As websites have become more 
like environments and as digital design 
practices have developed, it no longer 
Seems adequate. At Super User Studio, 
we refer to ourselves as both user 
experience designers and digital 
product designers. 

Stu Collett is a co-founder of Super User Studio 


Jonathan Smiley 
Designer 
zurb.com 


The web is still a big deal, and a bigger 
deal every day, so I have a hard time 
getting worked up too much over any 
limiting connotation ‘web design’ 
might have. That said, when people ask 
what I do | say Im a designer. | usually 
follow up with “mostly on the web” It’s 
just easier that way 

Jonathan Smiley is a design lead ot ZURB 


Jason B Jones 
Creative lead 
- seniesourER. «om 


I think the emergence e of tonne) ike 
interactive designer or user interface 
designer seem to more appropriately 
fit the work we actually do. However, 
I'd rather be known as a good designer 
than any platform-specific skillset. 

Jason is co-owner of Otterball (otterball.com) and 
creative lead at Centresource (centresource.com) 


Mike Buzzard 
= Applications developer 
Il www.ubancounciLcom 


“Web design' is clear and 
understood with the vernacular of 
today's specialist as well as laymen. 
The media format being identified, 
‘web’ is specific enough to suggest a 
particular skillset and understanding 
of creative and technical capabilities, 
limitations, implementations and 
most importantly, expectations. 

Mike is a partner member of Cuban Council 


Shane S. Mielke 
$ Creative director 
2advanced.com 
ey, — 
It’s an antiquated and vague term that 
means very little to any of us. It doesn’t 
scratch the surface of describing all of 
the roles involved on a project, some of 
which have nothing to do with visual or 
stylistic design. It also doesn't elaborate 
on all of the ways in which our work 
doesn't just live on the web any more. 
On the other hand, when we try and 
tell people about our fancy titles or 
job descriptions we're often met with 
blank stares. When | describe what | do 
it changes depending upon whom l'm 
talking to and how much they know 
about our industry. 
For family members, strangers or 
my neighbours I normally default to 
saying I’m an "photographer and graphic 
artist who creates websites". The typical 
response is "cool, sounds like fun" as 
there's nothing glamorous about what 
we do and there's no way to make it 
sound anything other than geeky. 
Shane is designer and creative director at 2Advanced 


> Elliot Jay Stocks 


Independent designer 
elliotjaystocks.com 
Being a ‘web designer’ is often acase 
of being a jack of all trades and as such 
is a rather broad term. But sadly it also 
has something of a stigma attached to 
it. Tell people outside the industry that 
you're a web designer and you'll often 
be met with a response like, “Ah, maybe 
you can help me fix my email... ” | prefer 
the term ‘designer’. While it’s certainly 
a lot broader, it better alludes to the 
importance of aesthetics in my work. 
Plus, for me personally, working on the 
web is only part of what 1 do. 
Elliot is a designer and illustrator and the founder 
of typography magazine 8 Faces 


Chris Coyier 
ji Web designer 
chriscoyier.n net 


Love it. It's simple and clear. Most 
people have some understanding of 
what a web designer is. They think you 
make websites. That's good enough. If 
the conversation goes deeper and they 
are truly interested, that’s fantastic. You 
can take the opportunity to explain 
more about exactly what you do from 
day to day. That’s different for all of us. 

| might tell somebody that when | 
design things, | think about what it’s 
going to feel like for a user to see and 
interact with the thing I’m building. | try 
to make the things | think they are going 
to do easy, obvious, and rewarding. 
Chris is a web designer working at Wufoo 


Leisa Reichelt 
76) UX consultant 
ambigui 


Back when | used to use Front Page to 
build web pages (sorry internet — it was 
a LONG time ago), | used to call what 

I did web design. These days, | find the 
term so generic as to be meaningless. 
What does ‘web’ mean these days? 
What kind of a designer are you? What 
do you actually do? 

How we describe ourselves and what 
we do is important because it is part of 
how we educate our industry and the 
people we work with about what the 
component parts of our craft are and 
what is important. 

It's why l've spent the past years trying 
to explain information architecture then 
user experience to taxi drivers and my 
non-internet friends. We need to be 
more descriptive — precision matters. 
Leisa is o freelance user experience consultant 


Jeff Croft 
Designer 
jeffcroft.com 
I do feel as though the term ‘web 
design’ is a bit dated. Although much 
of my work is still on the web, more 
and more of it is not, and | think that 
calling myself a “web designer” doesn’t 
adequately describe my skillset. These 
days, | usually call myself a “digital 
product designer” or sometimes, just 
a “designer”, 
Jeff is а designer, author, speaker and blogger 


++} Christopher Schmitt 
z Chief creative officer 
hristopherschmitt.com 


The industry has become n more 
fractured, specialised into various 
different ‘disciplines. You have 
information architects, frontend 
specialists who work on CSS and HTML 
(but also program JavaScript), backend 
specialists, mobile app developers 
and so on. There are even normal 
looking people walking around that 
call themselves “social media experts” 
without a hint of irony. 

A decade ago, one person could 
handle most, if not all, the needs of 
a web project. With automation and 
frameworks, a lot of the load of a small 
to medium-sized web project can still be 
done by one talented person - but you 
need a team for the long-term nurturing 
of an online presence. 

1 refer myself as a “web design 
specialist” since most people out of 
our industry know what “web design" 
means — which is stunning when you 
realise this field didn't exist 15 years ago. 
Christopher is chief creative officer for Heatvision 
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Rob Mills 
ё Studio manager 
© bluegg.co.uk 
aa 


For some projects, ‘web design’ is 
an accurate term. For others where 
1А and content strategies are needed, 
can't we just use those phrases: 

IA and content strategy? When | 
describe my profession I usually 

say that I'm a studio manager for a 
design agency, working on print and 
web design projects. 

Rob is studio manager for creative agency Bluegg 


f Chris Mills 
Web evangelist 
devopera.com 


I think ‘web design’ is still а reasonable 
term to use when discussing what 
we do with non-technical people. 
Yes, it limits the scope of what we do, 
which involves content strategy, IA, UX, 
accessibility, interaction design and 
more. But it's a more recognisable term 
for the uninitiated. 

However, | never call myself a web 
designer, as it’s not really what | do 
in my day-to-day work. Sometimes | 
am a web educator or web education 
advocate, sometimes | am an open 
standards evangelist, and sometimes | 
am just a web technologist. 
Chris educates on open standards for Opera 


| Mike Mackay 
Web developer 


The term "web design" is pretty much 
archaic these days. But if new clients 
approach me as a "web designer", 
sometimes it's easier to maintain that 
term. | make a distinction, though, 
between the development that | do and 
the visual work that | get a designer to 
do. | feel the generalisation lies between 
the actual term and work carried out, 
not the distinction between protocol, 
functionality or mode. 

Mike is a web developer and regular .net contributor 
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"You shouldn't spend tons 
of time building a personal ` 


site that's onlv viewed b 


the people you know" | 
Scott Belsky, Behance ud 


Scott Belsky, founder of Behance, talks to Oliver Lindberg to 
explain why creatives should have a personal portfolio site and 
be on his network, how to market yourself efficiently and what 
needs to be done to fix crowdsourcing 


A few hundred thousand creatives from 
o dozens of disciplines showcase their work 

оп the Behance Network (www.behance, 
net). It's become the largest online platform for 
creative professionals and attracts more than five 
million visitors every month. CEO and founder 
Scott Belsky calls it “the Linkedin of the creative 
world”. And now, with a new service called 
ProSite, Belsky is about to silence critics who claim 
it’s better to have a personal portfolio site, 

ProSite (prosite.com) enables you to build a fully 
customisable personal portfolio website with your 
own domain name that seamlessly syncs with your 
Behance portfolio. The service, which is currently in 
limited beta, doesn’t require you to know any 
programming, supports unlimited multimedia 
projects and comes with no Behance branding and 
ads. “Prosite aims to change the whole industry” 
Belsky enthuses. “We can't even recognise the 
websites that are made using this technology. That 
tells us that we're on to something.” 

Prosite is part of Belsky's masterplan to organise 
the creative world and help talented people to get 
the attention they deserve. "We're trying to boost 
the efficiency of creative professionals managing 
their brand and career,” Belsky explains. “A big part 
of that is that you shouldn't be spending tons of 
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time building a personal website that's often only 
viewed by the people you know. 

“It’s great to have your own personal portfolio 
site. Its great for your brand, for the people who 
know you and your existing clients. But you need 
to get your work in front of people that don't 
know you. The chances are that your future clients 
don't know you yet. In order to get your work out 
in the world and claim credit for it, you need to put 
it in a searchable system.” 


How to get noticed 

Behance now publishes around five projects every 
minute and it’s possible to sort through them by 
the most appreciated piece within a particular field 
in a certain region, for instance. An upgrade of the 
sorting system is in the works, so that you ran also 
easily search by clients and tools used. “A lot of 
people actually come to our platform and use it to 
search for who did what. They see a great 
campaign or website and want to know who 
designed this. So they literally type in the brand 
name and figure out the designer or developer 
behind it. And that's how you get your 
opportunities. It's really important to have a 
personal site and be on Behance, which enables 
your work to be indexed.” 


The Behance Network has turned into a | 
valuable tool for companies such as Google, R/GA | 
and Saatchi & Saatchi to discover new talent. Not 5b 
only will they advertise positions on the JobList; if 
they follow a certain portfolio, they'll also 
automatically get an email letting them know that 
a new piece of work has been added. 

“There was this guy who | met at SXSW, Bobby 
Ghoshal” Belsky remembers. “He was working at 
an agency in California and he was on the Behance 
Network for his side projects. Then he started 
getting so many new opportunities, six or seven a 
week, that he just left the agency! He went to be a 
freelancer and got contacted by Apple, who found 
him on Behance. They hired him to help redesign 
their ідо system. And while he was at Apple һе 
met another guy who did a lot of Pad 
development, Matthew Ausonio. They started their 
own company, called Flud, which is this new 
iPhone/iPad app about the social creation of news. 
They launched the first version of it as a Behance 
project and got around 15,000 downloads a week. 
Bobby attributes a lot of that to the Behance way 
of showcasing the work and spreading it quickly” 


Self-marketing 

Belsky reckons the creative industry doesn't take 
the need to get yourself out there in as many 
places as possible seriously enough. “It's 
uncomfortable but it’s really important, People 
need to be exposed to your work. You really need 
to think about overcoming the stigma of self- 
marketing. I'm not suggesting that you spam your 
friends and overtly promote yourself, but = 
you have to give people the opportunity to 
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think about - 


overcoming the 


stigma of self- 


marketing. You 


have to give 


people the 


opportunity to 7 


respect your worl 
Я you're up to. They 
forward, and 


Union, and she said how 50 per cert of 
a freelancer’s job is to market themselves. To do 
n't mean making a better 
hing your wor 


Sites (www.th. 
projects sorted by categories, including web 
design, illustration and typography. The 

on AdWeek (talentadwe 


play their portfolios on 
ising an app called Creative Portfolio 
Display (netm.ag/display-2 
It’s also im| 
olated networks of people. That's 
trying to bring different disciplines 
together in one pl 
“In the creative v 
hang out with phot 
hang out with design 
not really going t 


photographers only 
\d designers only 
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help us refine our craft but it won't help us expose 

ourselves to new opportunities. Open 
with and being e 

your inner stream." 


our eyes to. 


Getting organised 
Belsky claims t world lacks 
hich is why many ideas never happen. 
like to spend our energy on organising e 
ideas and ping the method and th 
to execute a project over the long-term! 
Behance is all about. ion and e 
се are called 
% (theggpercent.com), after Edison's quote 
is one per cent inspir per cent 
” Last year Belsky published a book 
Making Ideas Happe which he 
iewed more t ісіме 
creatives. He discovered that many focus a lot on 
organisation and е; . They have retreats and 
meetings to discuss their processes, share idea: 
and always try to get fee . "What they were 
really trying to do w у ас says 
If you don't tell other people what you're doing, 
no one's going to hold able an 
never going to get it don 
You shouldn't be tempt 
take part in a spec contest, though, reckons Belksy. 
“This is one of my greatest frustrations and 
concern: gy h. dto 
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cution. 


going to get paid for a piece of work, then th 
not going to spend more than an h 
it. And if they don't spend enough time 
work, the work is bad but 
with their name on it. 
work actually backfires!” 

To find a better crowd 


1. Design 
work fr portfolios that be: 
their talents, Those who were selected by a panel 
t the full brief and were paid 


Behance Network to play a big part in it. ® 


Scott Belsky 


ШЕ] CEO/founder of Behance 
Cornell University; 
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Associate at 


‘@scottbelsky 
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* Up to 300 GB hard drive & 12 GB RAM 
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€ Full server Virtuozzo backup / restore No risk 
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A Boost traffic 
with local search 


There's a lot more to search today than knowing how to rank 
highly in Google. The rising prominence of localised and 
social results presents landmark opportunities for online 

businesses jostling for visibility, says Mark Buckingham 


+ 
22 Mark Buckingham 
Ба search marketing 
consultant, business 
trainer, freelance writer 
and proprietor of south 
west London based SEO 


wyew.netseek.co.uk 


_ Rob Bowen 
editor of net and 
has 34 years experience in 
magazine and print design, 
Iwitter,com/SpeshBob. 


44 .net/july 2011 


Orce the province of a considered desktop search 
or map query, local search has spread thick and 
fast across the web, mobile and social networking 
space, from search engines to our mostloved 
apps to social review and check-in sites. New 
challenges abound for any website or business 
even remotely concerned with its local coverage. 
A key catalyst to this fundamental shift is, no 
surprises here, the ascendancy of Google Maps. 
"Google's invested a huge amount in maps” 
says Greg Sterling, a contributing editor of online 
search magazine SearchEngineLand.com. “Part 
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of that investment is about getting images of 
places but also obtaining data so Google сап 

then use # as part of maps, navigation and local 
business information — it has a wide ranging set 

of applications and services drawing upon this 
information. I'd say that Maps is the most successful 
product for Google after search.” 

Clearly, Google, Yahoo and Bing all populate 
their results pages with much more local 
information now, "That's partly in response to their 
users, recognising that users might be speaking this 
information, and also the influence of mobile and 
Google's data” adds Sterling. 

If Google has been known for indexing all 
content on the web, it's now striding towards 
indexing the world, with over Somillion places on 
its index card. And with Google's 79 per cent share 
of all UK web search, and a share of 77 per cent of 
all local queries (Jan 2011, UKOM/Nielsen), 

Google still the frontrunner by a long way. 
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SRB.. 
The highlighting of Places 
in Google's listings has 

revolutionised localsearch 


Carter Maslan, Google's director of local 
search, explains how it all began: “We 
started out trying to organise all the world’s 
information geographically, like our main Google 
charter but with smarts about the places being 
referenced in the information that's published on 
the web. We're creating a map that contains all 
the world information organised around Places; 
a big element of that is identifying re'erences to 
businesses and associated content. 

“We rank places based on three basic 
dimensions: relevance, prominence and distance. 
We look at all the references to those places across 
the web and each time we identify a PlaceRank 
for prominence, and then index content that helps 
us to find matches on the relevance side, based 
users’ queries. The distance is based on what 
they see, whether it's where they're standing with 


| 
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Know your 
has more than somillion 
Places indexed, and that is 
only going to increase 


their mobile phone, where their map viewport is 
positioned or just what their domain is on when 
they issue the query. 

“Local and mobile search is very important 
to Google," Maslan continues. “One of the big 
changes is that a user's location is a huge query 
input. Just by virtue of where you are and when 
you were there, you've already provided a lot of 
info beyond what you've typed into a search box” 

Already, over 20 per cent of Google's search 
queries now have a localised intent. This presents 
new challenges for search marketers. 

According to David Mihm, US-based local search 
specialist and president of GetListed.Org, "Local 


search really caught people's attention about two 
years ago when Google started displaying the 
10-pack, where you'd see a map and 10 business 
listings on the first page. That woke up a lot of 
search marketers to the fact that Google really 
wants to shop ‘mom and pop’ search results — it 
knows people are looking for physical places 
where they can have a face to face transaction, 
rather than purely websites.” 

It's vital that your business is on the map and on 
the radar. If Google doesn't know where you are, 
you wor't get a high ranking for a localised search. 
The first step is to make sure your information, 
marker location and category are accurate in 
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order to claim your Google Places listing. “Аз а 
by-product, you unlock a lot of insights about 
how people are finding you” points out Maslan. 
“You get to see stats on how people are searching 
for you, how frequently they're clicking on your 
website or driving directions to your place, and a 
summary of where they're coming from 

"The neat thing is that you're able to see the 
behaviour across Google properties including 
web search, Map, Earth and mobile search. So if 
you make a change to your website you can see 
a pointin-time correlation with what you did and 


any subsequent increase in traffic to your location.” 


Says Mihm: “Google is looking for very 
structured information; it's all about consistency. 
Essentially, it wants to be 100 per cent confident 
that it’s displaying correct information about a 
business so the more places that a business's 
information matches up — for example, in BT 
directories, Yell or Yelp — the more confidence 
Google has that it's an established, real business 
and the more likely it is to consider that a relevant 
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Мапу users are looking for physical 
places where they can have a face-to-face interaction, 
rather than an anonymous, online-oniy business 
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Top Google ranks Places 
based on relevance, 
prominence and distance. 
Above David Mihm, search 
specialist and president of 
GetlistedOrg, advises you 
to co-ordinate your online 
and offline information 

Right Getting good reviews a 

оп sites like Yelp canbe a === Іт 
huge boost to your SED == 


result to its searchers. In many local search and 
directory sites, business owners can add in their 
data for free, yet millions of companies have never 
taken full advantage of this free advertising.” 
According to Mihm, however, “The recent advent 
of Google's blended search has made organic 
factors a much larger part of the local algorithm.” 
So there's no replacement for a well-honed SEO 
campaign in balance with an engaging and 
accessible website primed at your target market. 
You want relevant, quality inbound links and, if 
your business offers products or services that might 
garner reviews, ensure you're well represented 
with lots of good references from other relevant 
and reputable sites. 


Six of the be 
location site 


7 118information.co.uk 


7 Gype.co.uk 
9 Yell.com 
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Building a reputation 

Enhancing your overall business may do more 
than just garner your business good reviews, it 
may help your rankings too. Given that it’s widely 
cited that reviews make a difference in Google's 
rankings, this should be one of the top priorities. 
“Enhance your reputation, get positive reviews and 
ensure they're flowing on a regular, steady basis,” 
advises Mihm, 

Mihm and other local search experts speculate 
that in some industries and geographies, Google 
may take volume of reviews into account! “The 
idea is there's a threshold and, if you're above 
a certain number of reviews relative to your 
competitors, you're going to have a better chance 
of outranking them. That's the other piece of what 
most of us in the industry believe is incorporated 
into the review algorithm.” 

But how can users be sure reviews are genuine? 
One factor is how they are generated. On the 
fastrising search site Yelp, for example, all the 
reviews are created by its users — real people 
who have to register and can put up their photo, 
which engenders trust in the service. "Reputation 
management has become a big deal,” says Sterling 
“It's a battleground, with companies trying 
to cultivate positive reviews for themselves - 
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and their products to prevent fraudulent 
reviews polluting their data” 

Numerous blogs cite that some of Google's 
search results still yield spammy sites, keyword 
domains with little relevance to the query, and 
brand bias. Some of that responsibility lies with the 
website for ensuring data accuracy (see page 46). 
So what does Google do to ensure consistency, 
quality and honesty in reviews? “We're trying 
to get smarter about the reputation of a review 
site and detecting fake or shill reviews,” says 
Maslan. “We're looking for signals based on the 
way end-users click on reviews, on the usefulness 
of the web domain publishing them and on the 
integrity of those who leave them. | think we'll see 
continued improvements, but it is a hard problem.” 

To guard the listed firms themselves against 
specious reviews there are numerous products 
specifically targeting the local market, including 
‘listening’ or ‘buzz monitoring’ tools that look at 
specific sites, such as social network and review 
sites. However, many local businesses don't know 
about them. 

Sterling explains: “Typically local business will 
do vanity searches or setup Google alerts, or go 
to specific sites to see what being said, and they 
do this very manual process, and in some cases 
they can respond on an ad-hoc basic. There's not 
a lot of best-practices out there. Yelp allows you 
to communicate with the reviewer privately, but in 
most of these instances the small business owner 
doesn’t really know what to do. It may also be true 
that some of the large brands are also at a loss 
what to do.” 


Google's rivals 

Google may be ahead of the pack in search, but it's 
certainly not the only player. The reach of Yahoo 
and Bing makes them worthy of attention, both for 
organic and paid advertising. 


Yelp 


FourSquare 
Gowalla 
Qype 

Google Places 
Groupon 
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Any local business should get on Bing but 


make sure you’ve got listings in the other 
top local sites such as Yell, Qype and Yelp 


Bing has heen a big investor in maps too and 
considers local to be one of its main strategies. 
“Like everyone in the industry, we understand 

how local and personal search is going to get 

in the future,” says Dave Coplin, Bing's UK 

director of search. 

"Local is crucial and a big strategic push for us. 
Any local business should get on Bing, but make 
sure you've got listings in the other top local sites 
such as Yell, TopTable, Qype and Yelp. All these 
have rich and featured listings for your business 
and, ideally, real customer references. Just like 
normal search, that broad set of metadata links 
will help to increase relevancy of the return when 
people search for your business or location. The 
evolution l'm really excited about is the integration 
of the social signal” 

sterling concurs: “Google recently said Facebook 
‘likes! don't impact on them at all, but these social 


facebook 


signals are starting to play into people's thinking 
about optimisation and reputation reviews and 
citations. In fact, Google has taken on Facebook 
with a ‘lke’ button of its own, the 41 button, and 
industry commentators are already suggesting this 
could impact on organic rankings.” 

It certainly pays for businesses to get smart and 
creative about how they embrace social media. 
Facebook and Twitter are two obvious examples, 
with one option being to pay for location-targeted 
advertisements. One limitation, though, is that 
this can only target users based on their profile 
information, as opposed to their search behaviour. 


Rich snippets and microdata 
Microdata is becoming an increasingly important 
part of the mix. “We have Rich Snippets for local 
search that supports a number of formats such 
as microformats and microdata, and that is an 


Local meets social Facebook offers both a local and a social dimension to getting people to the services they're searching 
for. Both interact with the ‘Like’ button, and Facebook is shaping up to be Google's biggest rival in the field of local search 
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iro magic Microformats are becoming increasingly 
important in getting you ranked highly in search engines 


aid in making references to your business more 
precise,” explains Maslan. Google looks for markup 
formats (microformats and RDFa) that you can 
easily incorporate in your own web pages. In most 
cases, it's as simple as wrapping the existing data 
on your web pages with some additional tags. 

The additional data Google displays is coming 
from special markup that’s inserted in a page’s 
HTML code. One microformat that Mihm is keen to 
encourage people to use is hCard (microformats. 
org/wicifhcard). This is a version of your address 
that Google can lock in on. 

“You have all these apps trying to pull together 
as much information as they can, and the 
easier you make it for them to pick up address 
information the better,” he says. 

With smartphone use increasing rapidly, mobile 
is a fast-growing area of local search. Mobile 
results are much more heavily in'luenced by your 
location. You're more likely to get a tighter radius 
of relevant businesses if you're searching from 
a phone or mobile device than you are from a 
desktop, where Google and Bing interpret that 
you're open to a wider dispersal of companies. 

“Many search marketers agree that designing 
for a mobile searcher is a safe bet,” says Mihm. 
“Ensure your pages load quickly with minimal 
latency, keep images to a minimum and be sure to 
indude a phone number in HTML, especially for 
iPhones as the numbers will be highlighted and 
touch to call. If you're a big enough business or 
in a market that attracts mobile traffic, you want 


Google places 


Your local busines 


discovered on Googie 


igned up Signing up to Google Places is simple, and 
offers enormous benefits for your sites SEO. 


a mobile version of your website, something like 
m.yourdomain.com that gets served when people 
access your site that way” 


The future 
What does the future hold? Carter Maslan: 
“Id say the area it’s going to improve most is 
contextual smartness. There's location awareness, 
personalisation, and so on. If you look at context 
as everything from your location to preferences of 
places you've rated to where you're standing now 
and the time of day, there's a huge opportunity 
to make the most relevant information quickly 
accessible with the least amount of work” 

Greg Sterling adds: “Augmented reality is a 
form of search that's growing — you can hold up a 
mobile device with a wikitude or a layer browser 


in Google Anal 
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in front of a building to find out what it is, or 
identify a product that has a QR code or barcode. 
Voice search is now a big factor also. A quarter of 
searches coming through the Android platform 

are voice initiated, and who knows what near-field 
communications is going to bring, where the phone 
is taking your coordinates and associating that with 
firms with a lat-long index in the database. 

"What would be even better, for example, is 
that when you're walking along a street you get a 
message saying 'here's a great pub' because you've 
indicated you like a certain kind of beer. There 
are various companies working on this, taking 
retail inventories and making them accessible 
online, showing the shops in your area that sell a. 
particular product, or if you're near a retailer that 
has this product at this price. This kind of scenario 
is within the realm of possibility in a few years.” 

What is the wider cultural impact of all of this? 
Whilst making our lives convenient and affording 
us all the power and access but also taking away 
certain things from us, there are concerns about 
how we make the sensible balanced use of this 
technology, keeping it in perspective, and in its 
place. Perhaps it's a question best left to the 
human algorithm, not just your grid reference. 
What is clear, though, is that search will continue 
to evolve and to excel, you have to adapt. 
Remember, the map is not always the territory. @ 
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Alastair Campbell is 
director of user experience 

at digital agency Nomensa. 

www.nomensacom 


Mike Chipperfield is 
a member of Brighton- 
based collective Magictorch. 
www.magictorch.com 
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* Lists v grids 


What's the best way to present content: a 

grid or list view? Alastair Campbell explains how 
Nomensa used A/B testing to help the .net team 

decide for the launch of www.netmagazine.com 


When the .net magazine site (www, 
@ netmagazine.com) relaunched, with а 

new design and more regularly updated 
content, one requirement was that the new site 
should better present the articles to encourage 
click-through. But which format would be best? 

A typical approach is the blog style, where you 
have a linear list of the latest articles. There might 
be a thumbnail, a heading and a short description 
of the article, However, the team was interested 
in using a grid layout that was less text-heavy, and 
potentially would be easier to scan over. 

That's where we at Nomensa came in. Wed 
already done some usability testing on early 
wireframes of the homepage, and could be quite 
confident that people would be happy with the 
grid view. The layout should encourage 
scanning and make decisions easy, we 
reasoned. A grid layout takes up less 
vertical space and, as everyone knows, 
people don't read online anyway. The 
graphically richer grid layout should be 
a slam dunk, right? 

There was a niggling feeling that it 
might not be, so we needed to find an 
answer. Asking people wasn’t really going 

to help here; it isn't a matter of preference, it's 
a matter of performance. It's also a case where 
asking someone to think about their preference 
could change it. 

We needed a quantitative method that would 
track a lot of people and assess their decisions for 
two different versions. So we settled on using A/B 
testing of two different views, the list and the grid 
view [see the next page for details of how we set 
this up using Google Website Optimizer). 

The next step was to use Google Analytics 
to discern any difference between list and grid 
views. There's a particular feature of Analytics 


that makes it an excellent companion to GWO: 
advanced segments. 

Applying an advanced segment is like filtering 
the analytics data on a particular variable. There 
are lots of options. For example, you might want 
to view only sessions that came from Twitter, or 
only sessions that lasted mare than two minutes. 
You can then view the bounce rates, tirne on site, 
average pages and all the usual metrics. 


Tracking with Analytics 
The segments we wanted to create were based 
cn the landing page people would see, so we 
were able to use the same URLs we used for the 
cptimisation set-up. One segment was created for 
the default view, where the landing page URL was 
simply a forward slash. The second segment was 
for the alternative view, located at /home/list. 
After a day, we had more than 600 people in 
each condition, and for every numerical measure 
in Google Analytics, there was no significant. 
difference. After all that set-up, it appeared (at 
first glance) that there was no difference. Then, 
we looked at the main navigation paths from the 
landing page. When looking at the grid view, 
the most popular next pages were split evenly 
between the main navigation and reading an 
article. For the list view, more people would 
select an article than look at the navigation. 


ae P 
ing The results 


showed that titles were key, 
and when viewed live we 
could see people going in 
quite 2 random order. 


Google Analytics enables 
you to separate a set of 
results for different 
groups of people 
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The two options that netmagazine.com provides for the article listings - list and grid 


It wasn't a huge difference, but there was a 15 
per cent greater chance that people would select 
an article from the list view. For comparison, 
everyone received the default grid view on the 
popular Tutorials page, and the effect was gone. 
Intriguing, but it's difficult to know how 
possible it is to generalise that effect, It would 
help to know why the list view encouraged article 
views, so we turned to a more qualitative method, 


Eye tracking 

Eye tracking is popular in user research, providing 
direct insight into where people are looking. 
There has been some controversy in the UX 
community about the usefulness of eye tracking, 
especially when it’s used by default. In many cases, 
a standard usability set-up will provide the same 
answer as a set-up with eye tracking, so it's hard to 
justify the extra equipment cost. 

For the .net website, though, we were trying 
to understand how people scanned the design, so 
eye tracking could provide some important clues. 

The test set-up was short and sweet. Each 
participant was asked to look at the new .net 
magazine homepage and to select an article they'd 
like to read. Half of the participants were first 
shown the list view, before doing the same task on 
the grid view. The other set of participants were 
first shown the grid view. 

The eye tracking image showed the grid view 
of the homepage and, initially, this didn't provide 
much in the way of clues. We could tell that the 
text titles garnered the vast majority of gaze, but 
this was the same for both grid and list versions. 

The difference was apparent only when you 
watched the gaze trails build up. With several 
participants, it became apparent that scanning the 
list was more predictable, generally one at a time. 
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when people were scanning the grid version of 
the homepage, the order was not the well-known 
‘F pattern. You might expect people to scan the 
grid left to right, row by row. The actual pattern. 
was much more scattered, sometimes going down 
the middle and branching out to either side. 

There are a several possible explanations for this 
less predictable gaze pattern. It might be that: 

+ People are simply more used to the linear 
version, therefore they are more used to scanning 
that presentation 

+ The linear nature of the list version is 
considerably easier to scan 

Does it matter that people take a random 
approach to scanning the grid version? Maybe not 
for all sites, but the articles are the key reason for 
people to visit net magazine. If people are more 
likely to get to an article when the list view is 
available, that's an important consideration for the 
homepage and section pages. 

With more participants, we might find that 
content guides people's gaze. For example, 
particular keywords or imagery might draw more 
people's attention. Another possibility is that there 
are low-raffic areas from a scanning point of view. 
The fourth and sixth articles (second row on the 
left and right) were not looked at as much as the 
fifth article. 


Google's Website Optimizer (GWO) enables 
you to set up simple A/B testing, or more 
complex multivariate testing. There are times 
when multivariate testing is needed, such 
as working out the most effective order for 
three or more items on a page. However, for 
comparing a list view to a grid view, the A/B 
experiment style is perfect. 

To set up A/B testing with GWO you need 
three things: 

+ A start page, usually the current or default 
page that you have now. 

* An alternative page, which varies in a way 
that you think will affect users. 

* An end page, which GWO will use for 
calculating conversion. 

When you've set up or identified these 
pages, you can put them into GWO and it will 
give you three blocks of JavaScript to include 
in each page. 

It's vital that you can add the JavaScript to 
the top of each page's source code, because 
that is the mechanism for assigning people to 
the different conditions. 

When a user hits the start page, the 
JavaScript randomly assigns them to one of 
the conditions, A or B. If the user is assigned 
to B, they are forwarded immediately to the 
alternative page. 

NB: If a user doesn't have JavaScript 
enabled or it’s being stripped en-route, they 
won't count in the results or statistics. 

You then launch the experiment, and 
people will start being assigned to each 
version of the page. What you're expected 
to dois wait for sufficient conversions for 
it to become statistically valid. However, 
in this case we don’t have an end page for 
conversion because it's an article site rather 
than a set journey — any article is good! We 
did have to put an end page into GWO, but 
we won't need to use the conversion metric. 


The answer 

To make a general claim about the usefulness of 
grid layouts, we'd need to run this test with many 
more participants and use a randomised content 
ordering. However, for the purpose of the .net 
magazine website, we could be pretty confident in 
saying that switching to a list view would increase 
the amount of people who go directly to an article, 

There is a caveat, though. Once a site is live 
and used regularly, people build up habits in 
how they use it. Facebook is probably the most 
famous example, where changes to the interface 
caused users to complain and even set up online 
campaigns about the change. The .net site has 
been live since March, so it might be that people 
have become used to the current view. 

Some of the feedback from the usability testing 
suggested that people would like to choose layout 
style, so the new .net site has always provided the 
choice to switch layout style with one click. 

I'm not worried about a backlash, but it will 
be interesting to see how many people make a 
conscious choice about it. @ 
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* Make your. 
website inclusive 


for all 


What is inclusive web design? It’s about 
Q considering the needs of the widest. 
variety of people possible throughout the 
design process, from conceptualisation to planning, 
build and completion. 
Inclusive design is well established in architecture 
and industrial design and the principles that apply 
to these disciplines are equally relevant on the 
web. It's people that your website engages with, 
not technologies, so a user-centred approach is 


+ 


fundamental There are ap basit principles of inclusive) И 


design - follow these and you won't go far wrong. 


Be equitable ,- Gms щү | 
Being €quitableis a central tenet of inclusive. 

| design, but it's important to note that equitable), 
Is Mot the same as equal. It's not about having your 
website look the same on every device; it's about 
providing different user experiences, but with equally 
valliable outcomes. This can be achieved by involving 
е isers in research and testing as early in the L| 
Process as possible. Having an inclusivity champion оп | 


very project is ideal, but if you have limited resources) 
Jyou can share the responsibility within your,team and? 
ask friends and family to help, as well as disability { 
charities, to put you in contact with real users. ] 


Be flexible 

Be flexible in your thinking and in your 

approach - there is no ‘one size fits all. Your 
users have a multitude of needs and behaviours, so 
your team needs to be concerned with the finer details 
of serving your audience, The aim of being flexible 
isto provide options for your users by building for 
different outcomes. 


Be simple and intuitive 
This is where you exercise restraint. It’s not 
simply a case of ‘less is more'; it's a case of 
‘less is more when more isn’t appropriate’. It’s about 
| the benefits that your website will provide users and 
| how these will improve the overall user experience. 
You need to ensure that withyevery feature you're 
adding value and not just complexity. People don’t 
want to have to work out Һәй to use your website. = 
Technology is meant to makétheir lives easier. 
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Sandi Wassmer of Copious explains the 10 
principles of inclusive web design and how to 
apply them to the real world of website building 
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Ís the managing director of 
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What's deemed perceptible by one person 
may be incomprehensible to another. 
The best way to get your head around this 
principle is to assume nothing: imagine that your 
website is the first one your users have visited. 
Think back to when you were at school and 
how frustrating things were for some kids when 
there was only a single way of teaching them. 
Perceptibility is relative: some people memorise, 
some contextualise, some visualise and some need 
to rinse and repeat. Being perceptible is about 
considering the varied ways of communicating 
information and building your site accordingly 


Being informative is about maintaining 
Fan ongoing communication with users by 
providing the right information and feedback, in 

the appropriate manner and at the right time 
From the moment users enter your website, you 


must start a dialogue with them that continues 
throughout their journey. The aim of being 
informative is to give users control and choice over 
the way they navigate, interact with and achieve 
their goals on your website 


Most websites include some form of 
interaction, whether it’s simple tasks such 
as clicking a link or completing a contact form, 
or more complex processes, such as buying а 
product or registering with a website. Handling 


Because our industry is young, dynamic and 
growing at an incredible rate, | don’t like 
to get too hung up on official job titles or 
labels. There will always be a lot of crossover 
between the different functions and disciplines, 
lepending on the size of an organisation or 
project as well as its breadth and depth. In many 
instances, people tend to perform wha 
functions they need to do as a matter of 
course, and don’t consider them to be distinct. 
However, within inclusive design, the disciplines 
are distinct, but at the same time must be 
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these processes well is crucial. Ironically, this is an 
area that's frequently either executed poorly or not 


considered. When people start interacting with 
your site, you need to equip them with the right 
information up front, in order to prevent them 
making errors and feeling silly. 

The main purpose of being preventative is 
to minimise errors, but the wider objective is to 
‘engender trust. When people feel supported, are 
treated respectfully and are not made to feel stupid 
when interacting with your website, the trust built 
up reflects on your brand. 


Although being preventative mitigates 

errors, everyone makes mistakes, and 
when they do, you must be tolerant. The aim of 
being tolerant is to help users build confidence in 
their ability to interact online with your website 
and brand. By being gentle and supporting users 
in correcting errors, the confidence built — which 
began with the trust engendered by being 
preventative — is long lasting, This reinforces 
reliability and influences whether or not users will 
visit your website more than once. 


For your website to be effortless, it's the site 
and not the user that needs to do the hard 
work. In addition, the visitor should not be privy 
to the hard work that’s gone into it. To your users, 
your site needs to be a light, breezy, hasslefree 
experience. If you place demands on your visitors 


rated for things to run swimmingly 
These disciplines include: 

© Brand custodianship 

© User experience 

* Content strategy 

* Market and user re: 

© Visual design 


© User interface design 


© Interaction design 


© Development 
© Testing 


Room 
Search F t е 


Ю choose your hotel, dates and meal plan 


Room Search 


Motel {Pease масаны Ж 
Requred 

Meal Plan” ed and breakfast 
Roque 


or are too restrictive, they will soon tire and go 
elsewhere. You need to put as little mental strain 
on people as possible. The aim of being effortless 
is to have happy users who can access and interact 
with your website efficiently and effectively. 


In a physical environment being 

accommodating relates to things such as 
headroom or door width. Online, it’s about how 
well you use space on the page in order to make 
people want to engage with your website. 

If there's too much space and not enough 
content, users may think the page hasn't. 
downloaded completely or there's something 
wrong with it, which can cause them to recoil. 

On the ather hand, if your site is jam-packed with 
content and looks crowded, some users may find it 
daunting, not know where to begin, and leave. 

The purpose of being accommodating is to 
make people comfortable so they can navigate and 
interact with your website feeling relaxed and with 
room to manoeuvre. 


Being consistent is about providing a 

familiar environment with memorable 
navigation, features and functionality. t means 
understanding the standards, guidelines and best 
practices that govern our industry, but it also 
means understanding conventions and why so 
things just are the way they are. Of course, if a 
feature can be improved upon that’s great, but if 
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We created sitemaps that provide meaningful 
alternatives to the main navigation 
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Booking Details 
Arrival date: 08/04/2011 
No. of nigris: 2 

Room Type: Double 

No. of Rooms: 1 

Guests: 2 adults 
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it's a convention users will expect when they visit 
your site, don’t disappoint them. It’s important to 
know the rules and when to adhere to them, but 
it's also about knowing when to break the rules. 


е are the principles of inclusive design. Now 
let's take a look at how to put them into practice 
in the real world. We'll do this with reference 

to two websites we built, Vision Hotels (www. 
visionhotels,co.uk) and Action for Blind People 
(www. actionforblindpeople.org.uk). 

The key challenges on both projects were very 
similar. Both sites share a core audience of visually 
impaired users of all ages, with a large proportion 
over the age of 50, and both also serve the needs 
of a wide range of professional stakeholders. 

The technical limitations in serving the core 
audience posed significant constraints, with IE6 
penetration at 20 per cent and most people using 
assistive or adaptive technologies. The challenge 
was to create beautiful, modern websites with 
intuitive user experiences, while overcoming the 
considerable technical constraints. 


ements of inclusive design won't 
hange any time soon, but that doesn't mean 

you can rest on your laurels; there will always 

be new things to learn, But, for now, your team 
ill need to understand: 


* Web standard: 


using the prevailing 
cifications for HTML, CSS and JavaScript 
* Web Content Accessibility Guidelines 
2.0 (WCAG) 
© Accessibility best practices 
© Usability best practices 


> User experience best practices 
2 Good design best practices 


Total Price: £179.98 


Lack of adoption of web standards among 
assistive technology vendors, particularly screen 
readers, has resulted in interoperability issues. This, 
combined with the need to deliver equally valuable 
experiences for all users — while considering all of 
the vagaries from IE6 to modern browsers — meant 
we had to create the best user experiences with 
HTML and CSS, restricting the use of JavaScript to 
an enhancement only. 

In the same way that we now design with 
standards and consider interoperability for the 
many different devices people use, it’s important 
to understand the needs and behaviours of the 


Web accessibility is not just 
about disability 

Disability and accessibility advocates have 
done a great job of raising awareness 
about the legal, ethical and business 
cases for accessibility, but accessibility 

is a human right for everyone. Web 
accessibi is about the creation 
websites that anyone and everyone can 
access and use, irrespective of ability 
language, ethnicity, cultural background, 


socio-economic status, age or anything 
else that may restrict their access. This 


includes anyone who uses the internet, 
the devices used to connect to it and the 


technologies employed to use it. 


All access Always keep in mind that som 
accessibility barriers aren't physiological 


Left The booking form was 


«created from scratch to 


ensure it was accessible to 
everyone and davice 
‘independent 


people behind the devices, browsers and other 
technologies that deliver content to end-users. 

That's why we began each project with a panel 
of user experts, We recruit people from within the 
sites’ target audience, but demographics alone 
dor't tell the whole story: we dig deeper and 
ensure access needs are part of the mix. 


To be both equitable and flexible, we needed to 
know quite a few things about our users. What 
were their technical abilities? What language 
did they speak? Did they have any impairments 
that might restrict their ability to access or use 
the internet? What was their ethnicity or cultural 
background and how would we be able to 
accommodate cultural diversity? What was the 
age range and how could we satisfy the needs of 
different age groups? What were their geographic 
locations? What type of internet connection did 
they have? What devices did they use and how 
were they configured? Did they use any assistive or 
adaptive hardware or software? What browsers did 
they use and what were their browser settings? 
Some of this data was readily available through 
analytics data, which provided Ihe context, but it 
wasn't until we talked to and observed our user 
experts that we had the information we needed 
Engagement with our user experts on both 
projects began with market research, completing 
surveys and participating in focus groups. They 
then got involved in prototype testing and worked 
with us throughout on testing features, аа 
functionality, accessibility and usability. » 
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link on Action for Blind People 
makes form nav ing an error much simpler 
Alternative booking methods are offered by Vision 
Hotels for those cautious about online transactions 


Once we got to grips with what our users 
needed, we began planning. We scoped out 
features and functionality, giving consideration to 
how we would deploy them in ways that provided 
users with choice 

Once our features and functionality were 
scoped, we wrote use cases, A few of our funky 
ideas fell by the wayside and the rest made it 
through to prototyping. We then got our users 
in to test the hell out of them, and we canned a 
few more. 

This may sound like a lot of work, but the time 
we invest in asking, thinking, observing, scoping, 
planning, prototyping and testing always yields 
great returns — we never have a snag list a mile 
long at the end of the build. We may finesse things 
here and there, but that’s about it, since most 
major issues are unearthed as we build and test. 

What about technologies? We began both 
projects with web standards, providing a 


Integrated teams unite 
form and function 


The idea that backend developers should 
be locked in a dark room to program 
until the wee small hours is just not right. 
The concept of backend developers not 
knowing or caring what happens to their 
data once it leaves their database and 
ers and developers not 
understanding about good database 
structure is absurd. There is only one 


website being created, so people need to 


work together, with an understanding of 
how their work impacts on other members 


of the team and the website overall. 


INTEGRATED 
TEAMS 


Form Function 


Don't v 
site as separate 


the design and ccding of yo 
hey need to work together 


60 .net/july 2011 


vision 
hotels 


месо 


Ноте 


* How to Book with Vi: 


— 


n Hotels 


Cliffden Hotel - South Devon 
ву Phone: эл (0)1626 770052 
ву Ema tien посилив ca ur 


Use nie Chien Hotes Сота Form to Эшит a олла Baquet: 


Russell Hotel - West Susse: 
T— 
Оза De Pinte но Coté toc 


I a Bocana eques 


meaningful foundation where all content and 
furctionality works in HTML first. We then applied 
effective styling to reaffirm meaning and enhance 
the user experience for visual users. Next, we 
added scripting to make behaviour more dynamic 
and intuitive, while also ensuring that it was 
unobtrusive and not device-dependent. 

For example, on Vision Hotels, when 
considering the flow between the stages of the 
booking process, we wanted to enhance the 
experience for keyboard-only and screen reader 
users so that they didn’t have to tab through the 
navigation at each stage. We couldn't give focus to 
the first form field because screen readers wouldn't 
be able to read the form label. We thought about 
giving focus to the H1, because it's common for 
screen reader users to use it to orient themselves 
оп page, but the H1 was not linking to anything. 


So we created Focus Point, which is an anchor that 
sits before the H1 and allows screen reader and 
keyboard-only users who have JavaScript enabled 
to circumvent the main navigation and tab into the 
form easily. Users who have Javascript turned off 
сап use the Skip links or the main navigation. 


In order to ensure meaningful experiences for 

all site visitors, we had to think about the many 
ways people access content. On Vision Hotels, for 
example, the photo galleries had to be visually 
appealing while also taking into consideration 
access needs and alternatives for non-text content. 
So we created a thumbnail gallery that linked 

to a slideshow, using JavaScript as a progressive 
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enhancement. The result is 2 gallery that's 
keyboard-navigable and screen readerfriendly, 
using both the title attribute and alt text. 

Providing different ways for people to navigate 
and access content is key. Some people like to 
use a website's main navigation, others like to 
use sitemaps and some ignore navigation and 
go straight to the search box. On Action for 
Blind People, we wanted to make good use of 
the sitemap as a genuine alternative to the main 
navigation and not just a rehash of it. 

During testing, we discovered that many people 
liked to use sitemaps, because they found them 
less cluttered. We grouped the main site sections 
for quick reference and also grouped the main 
sections, with section pages down two levels, in 
an ordered list. In addition, we grouped site-wide 
content for easy access. 


When user interaction effects a change, you 
must let users know in advance, so they can decide 
if that’s what they want and more so, that it's what 
they expect. 

We learned a few things about link purpose on 
both projects. At first, we set out to conform to 
the WCAG 2.0 AA by providing individual words or 
phrases as links, as long as they made sense within 
context. However, we quickly found out during 
testing that this was useless for some screen reader 
users, who grouped links by listing them out of 
context, so we changed our approach and now 
conform to AAA, ensuring that link text is sufficient 
on its own. 

On Vision Hotels, providing an intuitive, 
accessible and seamless online booking experience 
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у Our independent living service offers support with day-to- 
T Y day living, welfare rights, housing issues and managing 
personal budgets. We offer tailored support in all aspects 


of life after sight loss, enabling you to make informed 
choices and tn he in control of the wav vou live vour life. 


Above Content strategy informs the design of the Action for Blind People site. Services, resources and community are 
its focus, so these sections are easy to find and labelled clearly. They also link subtly to one another 


was a labour of love. We didn’t want to reinvent 
the wheel, so we looked initially to customise an 
existing online booking engine. However, they all 
used device-dependent obtrusive scripting so we 
had to build one from scratch. 

We crafted the booking form very carefully. 
Instructions, labelling, form field interaction, 
indication of required fields, indication of all stages 
and current stage in the booking process, error 
messaging, error handling and success messaging 
had to be clearly understandable by all, and it had 
to work in a way that prevents users making errors 
as much as possible. 


On Action for Blind People, we watched how users 
navigated pages when an error was returned on 
form submission. Because providing focus in form 
fields was unsuitable for screen reader users in this 
instance, giving focus to the top of the page alone 
caused screen reader- and keyboard-only users 
angst. So we added an additional Skip to Errors 
link at the top of the page, which improved the 
user experience significantly. 

On Vision Hotels, we learned that visually 
impaired people tended to book by phone or 
email. Although the focus groups were told that 
the site would be fully accessible, there were 


concerns about the need for a choice of booking 
methods — users reported poor online experiences 
with sites that claimed accessibility conformance 
but didn’t deliver. It was clear that trust would have 
to be earned. In this instance, serving the needs 

of the core audience prevailed over usability best 
practices and we created an interim booking page 
to provide the necessary choice. 

In general, two main factors help to make sure 
that both websites are accessible and memorable. 
The first is ensuring that common elements are 
consistent, clear and concise, and don't make 
the user have to think. The second is sticking to 
conventions. The internet has been around long 
enough to have some — placing your logo in the 
top-left corner and making sure it’s clickable is an 
obvious one. Employing a header, footer and main 
body content as part of the structure is also now 
a convention. Giving people what they want and 
expect makes them more happy. 

Making content dynamic in a world dominated 
by sexy JavaScript is not an easy task. On Action for 
Blind People it was all about content strategy. We 
structured the content around three cornerstones 
= services, resources and community — and created 
a system for ambient referrals that quides gently 
and signposts users to related content in the other 
cornerstone areas, The usual approach to large 
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Above Make it easy for people to discover relevant content 
and they will stay loyal 


charity websites, where fundraising is the aim and 
the ambience is austere, could not provide the 
deeper levels of engagement and participation that 
Action sought from its community. Our approach 
not only facilitated the desired community 

activity, but it allowed Action to have a single. 

voice to communicate with both community and 
stakeholders alike. 


Fitting it all together 

The internet is like a big puzzle, and the 

different pieces should fit together perfectly — 
but unfortunately they don't. By following the 
principles of inclusive design, youll be giving 
your piece of the puzzle the best opportunity. 
With different devices, configurations, browsers, 
personal settings and assistive technologies, and 
no agreement on how to achieve interoperability, 
web builders must do their best to accommodate 
the diverse ways people access the internet. 
Building with this in mind will ensure your visitors 
have a quality experience. 

Inclusive design enables us to create great, 
meaningful, on-brand internet experiences for 
the widest audience possible. However, inclusive 
design is also a new way of thinking, and its 
overarching aims may not mirror those of your 
organisation or clients. Change takes time, so you 
may not be able to do everything at once. If you 
just start thinking about accessibility and plan your 
projects with users in mind, you'll be on the right 
path. There will be trade-offs and tough decisions, 
but this is where inclusive design really comes to 
the fore. It challenges us to hone our craft and 
fosters real creativity and innovation. ® 
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Nick creates websites 
at Project83, a design. 
agency in Nashville, 
Tennessee. In 2008, he 
and his partners set up 
mobileawesomeness. 
сот, which features the bestin mobile 
web design inspiration and helpful 
resources for mobile developers. 
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|3 Bruce espouses open 
standards for Opera 


q 
{2 (opera<om/geveloper), 
2 with particular interest 


іп HTMLS, widgets and 

accessibility. He's one of 
the HTMLs Doctors (htmisdoctor.com) 
and co-wrote the book Introducing 
HTMI with Remy Sharp. 


Paulis an award- 
winning digital 
designer and writer. 
He's produced 
websites, print and 
animated creative for 
clients such as Adobe, Virgin Media, 
PlayStation, 2Fntertain, D&AD, the 
BBC, Smirnoff and British Airways. 
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director at Happy 

Cog (happycog.com). She also blogs 

regularly about web development at. 
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JavaScript project, writer for ajaxian. 69 e 
com and editor of scriptiunkie,com, a 
resource for web development articles. Ж. 
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- Ryan is a designer and 
< front-end developer 70 
working for Headscape. 
4 He's obsessed with 
[^ X clean, efficient and 


semantic HTML, CSS 
and jQuery (his favourite framework) 
and has a special interestin making 
design and CMSes work well together. 
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Designers.MX 

(1-2) Designers.MX ( ) is a list 

of music playlists for designers, by designers. 
Nashville-based coders Blake Allen and Josh Sullivan. 
created the site to inspire other creatives through 
music. Each selection of tracks is submitted by a 
hand-picked designer, who creates a unique name 
and cover for their playlist. The result is a beautiful 
and diverse compilation of music that users can 
browse and listen to free of charge. 

Anatural next step for the site was to go 
mobile as well, as Sullivan describes: “We really 
asked ourselves why we wouldn't do a mobile app. 
Apple has done a great job of providing ways to 
customise the browser experience. The rest is just 
CSS, HTML and a little JavaScript.” 

The mobile experience is visually consistent 
with the desktop version, complete with a beautiful 
player anchored to the bottom of each playlist 
page. The mobile version has a fixed background 
that would work well for the desktop version as 
well. l'm a big fan of this site and now a regular 
listener. Check it out and you will be too. 


Sea-Doo Mobile 
(3) Sea-Doo ( ) is one of the first 
mobile sites built with the much-heralded jQuery 
Mobile framework (jquerymobile.com, still in 
alpha at the time of writing). The greatest benefit 
of jQuery mobile-powered websites is device 
compatibility. If you're building a site to span 
several operating systems, then jQuery Mobile is 
a great choice. However, if you're trying to mimic 
а more native iOS experience, then j@Touch 
iqtouch.com) is still the way to go. 
The Sea-Doo site design doesn't blow me 


away, but it’s easy to navigate and shows off 
their extensive product offering. All the boats 
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and personal watercraft have dedicated pages 
with photo slideshows and in-depth product 
specifications. Complete with a dealer locater, 
it has all the tools for customers on the go. 


Dan Tamas 

(4) Dan Tamas (www.d. sme) is a mobile 
app developer hailing from Spain. It was time for 
him to drink his own sangria, so to speak. Every 
mobile developer should have a mobile-optimised 
site, right? Thanks to the Titanium Appcelerator 
(appcelerator.com) platform, he’s already 
developing apps with web code. 

The secret sauce behind Dans mobile website is 
media queries. “The master stylesheet was working 
really well on the iPad in portrait orientation and 
the mobile stylesheet (for iPhone) needed only 
minor adjustments to work on Android devices. 

I limited the mobile stylesheet to smartphones 
and excluded older phones with smaller screens,” 
he says. Soon after launching his new mobile site, 
Dan noticed that over 10 per cent of his users 
were visiting from mobile devices. He expects that 
number to keep trending upwards as more people 
browse the web from their smartphones. 
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for iPhone, iPad and Android 
smartphones. | use the Titanium 
Appcelerator framework to build cross 
platform applications and I am an active 
member of the Appcelerator community. 
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the month. 


Web Standards Sherpa 

(1-2) An outreach effort by the Web Standards 
Project (WaSP), Web Standards Sherpa 
(webstendardssherpa.com) brings experts together 
to examine and discuss industry best practices and 
tips in a practical manner. The site uses great fonts, 
has sleek borders and offers a homepage carousel 
that takes advantage of CSS transitions. 

"What proved particularly difficult about the 
set up of the carousel for featured articles was 
isolating specific aspects of the design for both 
the transitioned and transition-free versions and 
then turning on certain additional styles for the 
transitioned version,” explains originator/lead 
developer, Aaron Gustafson (aaron-gustafson.com). 

Gustafson stresses the importance of cross- 
browser testing CSS features, such as inset box- 
shadows. “They made it easy for us to spruce up 
our code blocks and such, but on certain articles 
(<cough>like mine«cough») where there were 
several instances of inset shadows at play, scrolling 
got a bit choppy in WebKit browsers,” he says. This 
led to only keeping the effect in Firefox, IE and 
Opera versions, for now. 


“Руе fallen in love 
with many features 
of CSS3, especially 
using RGBA colour, 
transforms and 
transitions" 


Pat Dryburgh 
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Love for Japan 

(3) Love for Japan (loveforjapan.com) was created. 
after the massive earthquake in March, The site 
asks the community to scan and submit hand- 
drawn pictures of hearts to be incorporated into a 
letterpress poster for sale, the proceeds of which 
will go to the Japanese Red Cross. 

Leading designer Mike Precious (mikeprecious. 
com) created a unique design inspired by Japanese 
artand featuring layered textures that mimic a 
watercolour painting. 

CSS3 techniques are used to give polish to the 
design in browsers that support it. “I've fallen in 
love with many features of C553, especially using 
RGBA colour, transforms, transitions and so on,” 
says Pat Dryburgh, the site developer. “While this 
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site doesn’t take advantage of everything C553 
has to offer, I did decide on taking a progressive 
enhancement approach to the CSS” 

Dryburgh is grateful for the response the site 
has had so far, and emphasises: “We are all one 
community and when one of us is hurting, we 
all must do our part to help” 


Method & Craft 

(4) Method & Craft (methodanderaft.com) uses 
videos, articles and interviews to provide an 
experience described by designer Phil Coffman 
as being “akin to looking over the shoulder of 
your favourite designer”. 

Site developer Noah Stokes (noahstokes.com) 
uses Typekit, HTMLS video and a 1080 grid. He 
explains that this decision was based on the target 
audience — the design community, who have 
high screen resolutions and modern browsers. 

One interesting technique is the way Stokes 
styled the notch in the navigation by using two 
fixed divs and background images. "The bottom 
div starts about 400px from the top and stretches 
to the bottom — completely done with CSS. The 
top half is an image with the notch in it. Using an. 
ID on the body element, | can shift the background 
image up and down according to which section of 
the site we're on,” he explains. 
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the month 


Ribot 
(2-2) Ribot {ribot.co.uk}is a Brighton-based 
company that creates simple mobile products to 
inspire and assist, and was started over four years 
ago by brothers Antony and Jerome Ribot. Its site 
is powered by WordPress, using a theme designed 
in-house with HTMLS markup. Jerome explains: 
“We love to be semantic when crafting HTML, so 
HTMLS gives us the ability to use more descriptive 
semantic tags than just plain «div»s, making the 
code easier to read, structure and understand. 
“The hardest thing to do when starting with 
HTML is wrap your head around the concept that 
a page can have multiple headers and sections. 
now, and so more than one H1 tag. It's a different 
way of thinking about HTML, and means you can 
see a document as a collection of redistributable 
modules of content rather than just a single page.” 
It was designed from the outset to work with 
mobile devices. “We built the initial CSS to present 
the site in a single fluid column, which would work 
well on mobile, then added CSS media queries to 
create a two-column design and finally a three- 
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“You can see 
a document as a 
collection of content 
in redistributable 


Jerome Ribot 


column design. This order was important, as many 
mobile devices don’t support media queries.” 

But what about the zombie browser that won't 
die? “For IE6 we used Andy Clarke’s Universal Еб 
CSS stylesheet (netm.ag/uni-216) and just applied 
it to the site using Conditional Comments (netm. 
ag/conditional-216). This allowed us to provide IEG 
users with all the core content, but without any 
extra costs incurred fixing CSS” 


Haiti Earthquake Anniversary 
(3) After the Japanese earthquakes, it’s easy to 
forget the quake in Haiti last year that killed 

an estimated 230,000 people. World Concern's 
haitioneyearorg aims to keep Haiti in the public eye 
and show progress being made. 
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Designer Joseph Lee (josephrlee.com) explains: 
^| chose to use НТМ15 to keep up with current 
standards and best practices and also to futureproof 
‘our code. Mainly | used the new semantics in 
HTML5 (doctype, new elements) more than any of 
the other features. | used the HTMLS boilerplate as 
my dase, which had accounted for IE users. Also 
‘our IE userbase without JavaScript was negligible.” 

Lee's also thinking mobile: “Id like to play with 
(media queries and incorporate some responsive 
web design techniques for a mobile experience.” 


BeerCamp at SXSW 2011 

(4-5) BeerCamp was in fine fettle at this year's 

SXSW, and its site (2011.beercamp.com) uses the 
НТМІ5 doctype; conditional comments to add a 
class to the body element reflecting the version 

of IE; lots of Modernizr; multiple CSS3 web fonts; 
HTMLS structural elements; and the <time> tag. The 
central content area is unreadably small. Scrolling 
down the page causes it to zoom in, so the central 
area becomes more legible. When zooming in 
completely, you'll see a spinning top, presumably 

їп homage to the sci-fi movie Inception. And what 
magical technology powers this animation? Canvas? 
WebGL? Some CSS animation? An SVG? None of the 
above — it’s a good old-fashioned animated GIF. 
Find out how to create a similar scrolling zoom effect 
to the BeerCamp site with our tutorial on page 70 
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Springloops 

(а) Project management tools sure have come 

a long way. The web has made team-based 
collaboration as easy as pie and Springloops v2 
(wwwspringloops.com/v2) kicks it up a notch with 
a major revamp of its user interface. Considering 
jQuery's ease of use, it comes as no surprise that 
both the jQuery and jQuery UI libraries are in use 
to provide the standard DOM manipulation and 
dialog management. It’s also cool to see the jQuery 
‘Templating plug-in used in several pages of the 
application. It's a testament to the growing need 
for easily manageable client-side code. 

Developer Szymon Szczepankowski says: “Our 
custom-made components are not only object- 
oriented by also context-oriented. It makes reusing 
them several times per page a breeze.” 

Another feature is the Javascript-based file 
drag-and-drop when creating a new ticket. Hover a 
dragged file over the droppable target div and the 
app recognises it and highlights the area. When the 
file is dropped, an Ajax call is made to immediately 
upload the file and link it to the ticket. A standard 
‘click to browse’ dialog can still be used too. 

Plus speaking of Ajax, the whole application 
goes after the single-page application metaphor, 
helping the user get immediate feedback by 
making Ajax requests instead of full page refreshes, 
Allin all, a great interface update that's easy to 
understand and smooth to navigate. 


“Our custom-made 
components are 
object-oriented 


oriented” 


Szymon Szczepankowsk 
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Ex "Newsletter" "Marketing site", "CMS 2 0". You can change it anytime. 


trunk, branches, tags + 


/ /JavaScript 


Amazon Cloud Player 

(2) Being leaders in cloud computing, it made 
sense when Amazon announced the Amazon Cloud 
Player (amazon.com/ap/dmusic/mp3/player), which 
plays your music from anywhere on the internet. 

A few years ago, companies would have used Flash 
to produce an application like this. But Cloud Player 
is a combination of HTML, CSS, JavaScript and Flash, 
making it lightweight and leveraging the best 
technologies for specific functionality. 

For page effects and DOM work, jQuery and 
jQuery UI are used, providing a responsive, cross- 
browser-compatible interface, The jQuery Ul slider 
control is used to show the progress of a song as it 
plays, while clicking the refresh icon makes an Ajax 
call to update the current list of uploaded files. 

As has become standard practice with Flash and 
JavaScript, SWFObject is included because of the 
rich JavaScript API's interaction with SWF files. It’s 
used extensively for tying the Flash media player to 
the controls that enable users to play their music. 


rmm 3 = 


Release StoreMags ë (Радаа 


=== 


‘Amazon МРЗ Uploader 


| saa 


= eres е Wed Masa 


m— 
В а нот зла тона, 


The jQuery Templates plug-in is in full use, 
making it easy for reusable client-side templates 
to be created and filled on-the-fly as ISON data 
is brought in via Ajax calls. Since it’s mimicking 
a desktoo application, the Cloud Player uses the 
jQuery History Plugin, by Taku Sano, Мікаде 
Sawalari and Takayuki Miwa, for managing the app. 

Even the music uploader uses JavaScript. The 
‘Amazon MP3 Uploader is an Adobe AIR app 
based on HTML, CSS and JavaScript, using jQuery, 
homegrown code and the AIR APIs to produce an 
app that places files in your Cloud Drive. 

Currently the Amazon Cloud Player is only 
available in the US, but it surely can't be long 
before the rest of the world gets a go. 


Evernote Web 

(3) Evernote (www.evernote.com) has become 
an indispensable tool for many people, who use 
it daily from their browser and mobile phone to 
stay on top of important information. so when 
the company announced it had launched a new, 
revamped web interface, there were more than a 
few worried users. Not to fret, though — the new 
user interface is easy to understand and to use. 

The web interface was created using the Google 
Web Toolkit (code.google.com/webtoolkit), which 
enables developers to build complex Java apps and 
then compile the apps to JavaScript for browser- 
based rendering. Lead developer Jason Terk says: 
"The biggest advantages conveyed by GWT came 
from its lava to JavaScript compiler. Compiled code 
is typically much faster than handwritten JavaScript, 
because of aggressive optimisation like inlining 
and dead code removal.” The application provides 
the functionality you'd expect from client-side 
sites, with plenty of Ajax interaction to pull back 
information with few page refreshes. 

‘Anew feature is the zoom function for images. 
When you hover aver an image, a magnifying glass 
will appear, enabling you to zoom in for greater 
detail, The layout of the app is also improved, with 
easy previewing of stored images as opposed to 
the older version's tabular-style text-only view. And 
of course, JavaScript-based layout resizing is in 
place to help you size columns to your liking. 
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Pica Pic 
(3-3) Here's a retro handheld games website that 
has been made just for fun. No campaign, no 
corporate hoo-hah and no dosh to be made. Pica 
Pic (pica-pic.com) creator Daniel Mizieli ski came 
across his old handheld games while de-junking 
his cupboards. Deciding to hero-worship these well 
worn and garish lumps of plastic, he designed a 
site where each game can actually be played. 

When your pocket money ran dry and kept 
you out of the arcades these were the next best. 
thing available. It was hard to muffle the electronic 
squawks of Donkey Kong while playing with it 
under the bed sheets, but now as an adult you can 
feel no shame and freely squeak and beep next to 
your colleagues during your lunch break. 

"| used Flash as it's easy and fast to write,” 
explains Mizieli ski. “But how may web visitors 


Donkey Kong Jr. 
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really care about how it's made? When | watch a 
movie | don't care what software was used to edit 
it. It’s the end result that matters” 

For a daily fix of G-Man, Donkey Kong, Space 
Bridge and many others to come, pop over. 


Karlo Jurina Selbstgesprache 
(a) It’s becoming all too easy to promote a music 
release using just a Facebook page, a download 
sample and perhaps a spam friendly email. There's 
an overly heavy saturation of this stuff right now, 
and those willing to spend the time to buck the 
trend will be the true innovators and will do well. 
A case in point is the awesome visual 
interpretation of German musician Karlo Jurina’s 
debut album Selbstgespráche (karlo-jurina.com). 
Created using Flash, the visuals give you a way 
in to fully appreciate Jurina’s complex music. 
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“Our app recorded 
the different tracks, 
which we used to 
create the organic 
visualisations” 


Timo Langpeter, developer and founder of 

German interactive media studio Britzpetermann 
britzpetermann.com), notes that: "We used Adobe 
Flash exclusively for the graphical work. We also 
developed an iOS App called PhàcPàd (netm.ag/ 
britz216) that we used with iPads to record the 
different image tracks, which created the organic 
visualisations to accompany the music.” 


Helvetica Face 

(5) Helvetica Face (livetype.in/face) is a font that's 
all about you. Well, all about your face. It’s a play 
‘on words. Face font. Your face. See? 

It’s a typeface generated in real time, which lets 
visitors become part of а glyph. Literally. Just click 
the button, smile for the camera and whiz bang 
wallop you can squeeze your features into a letter 
and join the online font library. 

ts an ever-changing font face and there's 
probably a very lovely and complicated rationale for 
the idea — which extols the virtues of humankind 
impressing itself on letterforms. But quite frankly 
it’s just fun, and a nice site for you and your mates 
to have a laugh while trying out, 
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desktop. That's why we сай 

thom SmarSites RueVerte 

(2) RueVerte (www.rueverte.com) is an absinthe 
seller educating visitors about the spirit that 
everyone has heard of, but few know the real story 
behind. The site was designed by Colas Générau, 


who selected osCommerce (oscommerte.com) as 


New in the Foundry моттаолен We love our clients: 


Sparkbox has the creativity and 


Matters 


net 


CMS site of 
the month 
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o 


talent to craft effective solutions; 
the geeks to capitalize on new 
technology and ensure security; and 
lots of passion that demonstrates 


the CMS. osCommerce is open source, with a large 
commurity of developers behind it. 

"The feature т most proud of is the ability to 
compose your own sample sets,” says Générau. “For 
this, we needed to modify the way osCommerce 


1 Responsive Web Design Chanqes handles products added to the shopping cart, 


but the code of osCommerce is pretty easy to 


Sparkbox understand and so simple to adapt to your needs” 
(1) Sparkbox (www.seesparkbox.com) is a web 

design and development studio pushing the Patrick Properties 

message that “your site doesn't sit on a desk BUB 

anymore" The site was designed by Ryan Clark, Hospitality Group 


creative director of the company, although the 
completed site was a team effort. 

“We love that the ExpressionEngine application 
lexpressionengine.com) works beautifully on an 
‘open source stack, even though it’s not open 
source itself? explains Ben Callahan, president, 
when asked about the choice of CMS. "The key 
factors for use are the flexibility it provides with 
custom channel fields, ease of extendability and the 
amazingly helpful EE community” content types and sections, demonstrates the. 

The site layout responds to varying resolutions, flexibility. Everything is completely editable from 
and ExpressionEngine helped them in this too. “The a defined publishing form,” explains Aaron Quinn, 
flexible templating system built into EE letsusdo — creative director. “With multiple venues, venue- 
whatever we want with HTML, CSS and JavaScript.” ^ specific events, catering menus, price listings 
While this is the feature they're most proud of, the апа, of course, a blog, we needed a system that 
element that gets the most attention is the site was robust enough to manage different types of 
footer, Who doesn’t need a little more cowbell? content quickly and efficiently, Having the content 
centralised in a database allows us to create data 
relationships to enhance a user's experience” 

One of the most striking aspects of the site, 
from a visual perspective, is the full-screen 
photography behind the text of every page, which 
is cleverly loaded in the background using Ajax. 


{3) The Patrick Properties Hospitality Group 
(www.pphgcharleston.com) website showcases 
its one-of-a-kind properties and hospitality 
services for premier weddings, corporate events 
and special events, The site was designed 
by Bob Galmarini and the team at (e) house 
studio (www.ehousestudio.com), who selected 
ExpressionEngine as the CMS. 

“The venues page, with all its many different 


“The flexible templating system built into 
EE lets us do whatever we want” 


Ben Callahan 
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Social 


Matthew Smith 
socialism. Not the political preference, 


e but the phenomenon of sharing 


everything using your preferred social tool. 
However, integrating social sharing into your 
designs can be tricky. 

You may gripe about the Facebook Like button 
or hate Twitter's tweeting bird, but creating your 
‘own buttons to get people to Like or tweet your 
‘own or your client’s pages isn't always an option, or 
recommended. So assuming we're going to use the 
buttons provided by social sites, how can we bring 
them to our users in a context that makes using 
them fluid and easy? 

These social buttons are essentially mini forms 
and actions that can be taken on a page. Although 
each social sharing process is unique, they should 
all be handled with design care so the user feels 
well-informed about their sharing choices and how 
to do it quickly so they can keep enjoying your site. 

You can do this by creating the context for 
action. Social sharing actions are a kind of 
metadata on a site, and сап be pulled aside using 
whitespace, a utility box or using a persistent 
vertical travel to get the user's attention. 

Sometimes, conventions can be worth breaking, 
but often on the web there are conventions that 
help users who may not even know what a web 
browser is (netm.ag/browser-216). Whether or not 
you change the overall characteristics, placing the 
buttons near ather metadata or titles can help draw 
appropriate attention to them. If you leave the 
buttons in their native state, you can emphasise or 
separate them with context. This can be a way to 
customise the look and feel without breaking the 
best parts of the convention. @ 


We're right in the middle of an era of 


Obsessed with creative inspiration (see 
his site patterntap.com) and attention 
to detail (see his work at squaredeye. 
сот), Matthew Smith loves helping 
designers capture what inspires them. 


Draw appropriate 
attention by placing 
buttons near other 
metadata or titles 
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(1) The blog of website 
design and development 
firm Happy Cog (cognition 
happycog.com) uses a 
strong orange highlight 
within an otherwise muted 
colour scheme and pulls all 
the social sharing buttons. 
into one common button 
with a drop-down menu 
of options. (2) | think my 
favourite approach to 
socal sharing distinction 
at the moment is the tool 
bar created for funding 
platform Kickstarter 


(Kickstarter.com]. ts 
pulled a group of the. 
social buttons inte a clean 
blue block on a white 
background, subtly setting 
°t apar: from the rest of 
the content. (3) The news 
website Reuters (reuters, 
сот) pulls a host of social 
links into a column on the 
right-hand side next to 
the article, keeping all the 
tools, including emailing 
and printing, together 

in one easy space. (4) 
YouTube (youtube.com) is 
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a big player in the social 
sharing space. It gets its 
sharing links out of the way 
by muting them in grey, 
removing the trademark 
colours, This is especially 
appropriate considering the 
focus it needs to keep on 
the video. (5) Vimeo (vimeo. 
com) uses a simple sharing 
icon in its player that opens 
a modal window with a 
host of sharing options to 
enable the user to meke 
simple decisions to share 
videos in a personal way, 
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What is usability and how do we achieve it in practice? 


Jacob Creech from IntuitionHQ.com offers some answers 


Usability is about making a site, service 
Qe or product simple and logical to use. 

This might mean following conventions, 
such as using the same shortcut keys in software 
ог button placement on websites. It might 
mean research to see the most intuitive place 
for a button or navigation items. It might mean 
experimenting with colour. The general premise 
is the same with all of these ideas: make it easy 
for your audience to grasp what's going on. 

Many say that usability is the designer's job. This 

is true, but there are so many variables with every 
project that it’s impossible to expect designers to 
understand them all. Every site has a different user 
base, behaviours and ways of interacting with the 
Ш; there are countless subtle variations that need 
to be taken into account. 


Differing behaviours 

A logical interface to me might seem like a maze 
to you. Some people type ‘Google’ into the 

Firefox search bar — not realising that it defaults 

to Google search. Look at the ReadWriteweb/ 
Facebook login debacle (rww:to/fbooklagin) where 
many mistakenly ended up on ReadWriteWeb by 
Googling ‘Facebook Login’. 

There is a huge variation in the way people 
view, use and understand things. We need to 
ensure we understand and design to suit these 
behaviours. How? Usability testing. 

Usability testing means looking at things from 
a user's perspective, following their logic, and 
optimising the experience. The more usable a ste, 
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the more likely people will enjoy their experience 
and return, The converse is also true: an unusable 
website can drive us to distraction (see netm.ag/ 
pitíalls-216 for examples). As Jacob Neilsen once 
said, “a bad website is like a grumpy salesman" 
Of course, this all needs explaining to clients, 
managers and stakeholders. Here are some useful 
points to bear in mind (netm.ag/usability-216 has 
in-depth explanations): 
® It helps generate significantly higher ROI for 
any site (netm.ag/roi-216) 
It’s easily integrated into existing work flows 
>It helps streamline the design process 
It involves clients without over-involving 
them (a big plus for designers) 
It creates feedback loops between 
‘interested parties 
Testing methods can suit any needs 
and requirements 
More usable sites are more successful 
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The key is to put usability in understandable 
terms. Clients want to know they're involved in the 
design process and users will spend more time or 
money on their site. Managers want to know that 
it will create a more efficient design process. 


Testing 
Next is testing. There is a variety of methods, each 
with their own pros and cons. These include: 

® Unmoderated remote testing 

® Moderated remote testing 

Focus group testing 
Lab testing 

When choosing a testing method, you need to 
consider a number of different factors, including 
time frame, ease of use, budget, and information 
requirements. In terms of information, nothing 
beats lab testing, but you need a budget to match. 
In terms of cost and time frame, unmoderated 
remote testing would be your best bet. 

There are options for those with zero budget. 
Grab someone walking past you for a hallway test. 
Draw up cards with different terms or options for 
card sorting exercises. Many online tools enable 
you to share tests on Twitter and Facebook 

‘And the most important step: take feedback on 
board. Keep refining and tweaking throughout the 
design process to ensure you end up with the best 
design you can. 
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ZURB 


Californian agency ZURB specialises in helping web startups 
connect with their customers. Partner Jeremy Britton explains 
its approach and philosophy to Oliver Lindberg 


Agency location: Campbell, California 

Team 13 

Expertise! Interaction, design and strategy 
Established! 1998 

Clients Facebook, Yahoo, eBay, NYSE, Britney 
Spears, Netflix, Reuters, Photobucket, Playlist 
Zazzle, and over 150 others 
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ле: What does ZURB specialise in? 

JB: Good question. ChubbyBrain recently analysed 
32 startups (netm.ag/startups-216) and found 

the number one reason for failure is ignoring 
customers. Most companies develop a product 
and then solicit feedback after they launch. 

We think that’s insane, but it created an 
‘opportunity for ZURB to specialise in designing 
interactions for people. We flip the whole process 
around to exchange continuous feedback with 
potential customers from the first napkin sketch 
to the launch. It's enlightened trial-and-error. 


net: How has ZURB developed in 13 years? 

JB: it's been a continual learning process, as we 
experimented with our service. We made forays 

into development; writing a „МЕТ shopping cart 
from scratch and launching a community stock 
photography startup at different points. These 
problems were interesting challenges, but we're 
better suited to tackling other ones. They weren't 
perfectly lined up with the core of what we're about. 


| 


From left, back row: Tanya Bresnears (designer), Bryan Zmijewski [chief instigator), Ionathan Smiley (design lead), 
Jeremy Britton (partner), Roeland van Krieken (business development), Chris Michel (designer), Deve Gamache 

(designer). From left, front row: Louis Corso (customer service}, Anthony Tacina (designer), Michelle Archuleta (office 
manager], Matt Kelly (lead encineer), Dmitry Draqilev (lead marketer). Middle: Jordan Humphreys (marketina intern) 
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Now we've got a healthy business with diverse 
services under a focused vision of design for 
people. We design and build our own apps to help 
exchange feedback, we invite speakers to inspire 
us at our Soapbox events, we push ourselves 

to develop cutting-edge C553 techniques in our 
Playground and we teach classes. 


„net: How do you work? If a startup wants help, 
what are the first steps you take? 
JB: We ask why are you doing this? What are 
you passionate about? Do you want to see some 
change in a market or something mass adopted 
throughout the world or are you in it for an exit? 
We then focus on setting challenging but 
realistic goals, positioning their product and 
sketching out the people we imagine paying for 
it. We avoid heavy market research and customer 
segmentation because we find most of the big 
problems are easy to solve if you ask simpler, more 
direct questions. 11% easy to get buried under a 
mountain of important-looking data, but that rarely 
helps us make valuable design decisions. 


пек: You put a lot of emphasis on sharing. You 
speak at conferences and publish material, Why? 
JB: It's hard to change the world on your own! 

We want to help people design great things for 
others. We lave hearing fram others about the 
things we're doing and we love giving feedback. 
Our talks at Google, RailsConf, jQuery, Web 2.0 
Expo, BayCHI and others are just avenues for us 

to exchange information with like-minded people. 
Our Playground — where we publish techniques, 
tutorials and plug-ins — is another way to connect 
with the design community about details important 
to pushing our craft forward as an industry. 


net: What's hopping on the ZURB Playground? 
JB: That depends on what the team is passionate. 
about right now. All of the ideas bubble up as 
by-products of challenges related to something 
we're doing. We've been heavily involved with 
jQuery lately, so some of our latest stuff includes 
plugins for that. These include Orbit, an image 
slider; Reveal, а modal window plug-in and 
Raptorize, a sleek jQuery effect that amuses visitors 
with a velociraptor that dashes across your screen. 


net: You're big fans of progressive enhancement. 
Why should people use it? 
JB: Progressive enhancement is about innovation 
and moving forward. Graceful degradation is about 
covering your ass from the past. 

“Don't screw up on IE6” is still important in 
some contexts, but we all know that there's nothing 
graceful about it. 
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.net: On your site you say you have a strong 
culture that puts an emphasis on collaboration. 
What does that mean in practice? 

JB: Collaboration is just another word for design. 
Great design is always focused on solving problems 
for people. A mentality of sketching, using 
magnetic whiteboards, continuous open dialogue 
over IM and breakout sessions in side rooms or 
across the open floor permeates our office space. 


net: What are you looking for in new ZURBians? 
JB: Whether an engineer, designer or copywriter, 
they should be Tshaped, geeks, scrappy, hard- 
working, team players, fun and enjoy challenges. 


(9 Funzio ( 216). (45) playfuland fun as they 
a social games company. Тарі (24:1) is changing меге. For the site we built 
леб What are you currently working on? It wanted a site that spoke the way people discover а sweet IS implementation 
JB: Feedback is a popular word here at ZURB. to its predominantly male and consume web content that animated in the entire 
To make this process easter for websites, we gamer audience. We through Al technology, scenery of the site plus a 
" Ж d designed a dark, sleek and we helped build its blimp that moves through 
Geyeloped an app called Notable that enables you site that helped highlight — consumer-facing site, the whole page. (8) Reveal 
to take any screenshot, add notes on it, and share its incredible custom art for which we're now (ве 
that with somebody. After we launched it we asked (2) We built TinyBounce refining the interface plugin we wrote to help 
for feedback From customers, then. hunkered down (oeim.an/ine-228) for the (6) Sliding Vinyl (neix ease implementation for 
fa refocus and. redesion' iha арр sole problems 10k Apart competition, эшш 225) wasa CSS3 — ourselves and for other 
i à Ë where contributors had to experiment created a people. Reveal is a simple 
supply a web app that was couple of yearsago, and jQuery plug-in to create 
net: What's the weirdest client request you've had? less than 10K {including still one of my favourites. тоба! dialog boxes, and it 
JB: Some of the best are when the clock is ticking. HTML, CSS and JS}. We The records thet slide already has wide adoption 
adapted our Bounce ар) out are generated with We also created Orbit, a 
Innes, Zazde. sal thelr custom product design, into a single app that CSS gradients, and the plug-in to handle image 
tool wasn’t working well any more but they needed came in at just under sliding animation isa CSS or content sliders, and 
to convince the US Postmaster General to let them 10K, and it received an transition {seen more we're working on several 
make custom postage stamps — next week. honourable mention. (3) — these days, but almost more. (9) Н5Х (liz rum) 
А was too exciting fo pass upc Weended up We do a lot of concept unheard of at the time}. approached us to nelp 
li тоскир їп OmniGraffle, — (7) Ohai (al )was redesign its site, after a 
creating a children's book about a child watching which has great support a lot of fun, We wanted failed redesign by another 
their parents use custom stamps in a few personal for stencils. We created о build something that firm. Our redesign was a 
and professional capacities. We also got into some these templates to help not only worked with any — big hit, and has been live 
deta Sand Масе ha asiy насы. @ with rapid prototyping type of game, but was as for two years now. 


-net/july2011 77 
Release: StoreMags & FantaMag 


.net/subscriptions 


Exclusive USA/Canada offer! 


( 


PLUS: uqa 


Home & Business Edition 


* Domain Name 


: д * * Unlimit : 
Access our PDF issue archive online $ cee 
Stay updated on new web technologies * Daily Backup 


Exclusive access to the world’s leading experts * 24/7 Support 
Receive a Web Hosting Pack worth $57 . 


E 148 pages of tutorials, insight and inspiration! 3 Eg ж Ж 

= Subscribe online at : б 
4 Or call toll-free on і 

E 

H and quote code: a015 The One.com 

E 3000MB Web 

š AMAZING. Hosting Pack is a 

E SAVINGS! 12 month service 

Н Don’t miss this which includes: 

ж great offer Z 


**by continuous credit card 


78 .net/june2011 


Release: StoreMlags ë Fanits)ilas 


StoreNMagsicombs гес Magazines) Download [u ше Оттай 


[below) — fash.org.uk — Оше 
Kavanagh — "Rather than using the shock 


tactics of same anti-smoking campaigns, 
ме employed an infographic style” 


(above) /Movie 
sites Anthony 
Palacios - “Burning 
particles immediately 
bring the visitor into 
Maki's world’ 


frontend > 


80  . /keepmarkupslim <<“ |. /stayaheadin 


Rich Clark explains how to target 
elements in the DOM without 
resorting to extra presentational 
markup by using C553 selectors 


85 | /Back to basics 
If you lack a formal design education, 
you'll need to self-educate before you 
can progress, says Ryan Downie 


86 Photoshop ` 


retro design 

Naomi Atkinson reveals some quirky 
Photoshop and CSS tricks to give your 
designs a retrotastic feel 


90  /build a zoomable 
user interface 
David DeSandro reveals how to create 
a zoomable user interface similar to 
that of 2010.beercamp.com 


backend - 


21 /share your open 
source project 

As GitHub brings the power of social 
networks to coding , Scott Chacon 
explains how to interact with it 


RJ Stores ШЕЕ) 


ВОО /boobbaby.co.uk — Ben Bush — 
"Budgets were small and they needed advice" 


112 


116 


118 


.net/technique 


the doud 
You need to take care when it comes to 
cloud hosting, says Dan Frost 


== build sites 
with Razor 


Master Microsoft's new view engine 
7757 build a web 


app with Node js 
Create speedy web apps with Node js 


G&A 
Matthew Wallis, founder of the CMS 
Grouptree, talks to Tanya Combrinck 


(above) < /Stay 
ahead in the cloud — — 
Dan Frost — “Working 
with cloud services, you 
can take away much of 
the pain of scaling up” 


articles > 
Website build-off 


This month, movie sites 


Makeover 
Ollie Kavanagh overhauls the website 
of anti-smoking group ASH 


How we built 

FHOKE explain how they helped a 
husband and wife create an online 
shop selling breast-feeding items 


snet/july2011 79 


format 


i True POF 


Dow 


net/technique/frontend 


markup sli 


Rich Clark 


Knowledge needed Beginner to intermediate HTML & CSS 
Requires Text editor, browser 


Project time 3 hours 


CSS selectors, which enable us to target elements at a more 
granular level without adding presentational markup or attributes. 

This means your markup can be super slim, semantic and flexible. There isn't 
space to cover all the C553 selectors here so we'll concentrate on attribute 
and substring selectors followed by structural and negation pseudo-classes. 

With a range of selectors available, it can be difficult to know which type of 
selector to use. As the new C553 selectors are introduced, we'll provide real- 
world use cases for them to use in your projects right away. 


Attribute and substring selectors 

CSS3 has extended the list of attribute selectors we can use by adding three 
new substring selectors to our toolkit. This means we can now target a rule 
and apply CSS styling to an element based on part of an attribute's value. We'll 
briefly describe each below. 


© To style an element with CSS, we need to be able to target it. Enter 


“Starts with” substring selector The caret (^) operator, when related to the 
substring selector, means “starts with” Far example, this could be used to 
target all external links in our content by adding a small icon indicating an 
external link. In the following example, we'll add a background image and 
padding to all links that start with http:// by using the ^ “starts with” attribute 
substring selector as below: 


alhrefA="http://"| 4 
background:url(imo/external.png) 100% 50% no-repeat; 


Miss Baker 


First Lady of Space 


Introduction Ран 


mon | Ratiremen 


B «боге humans were 1: ied into space. many animals were 
propelled heavenwards # to pave the way for mankind's pioneering 
endeavours. These original pioneers. including numerous monkeys, 
served their nations in order to investigate the biological effects of space 
travel 


Perhaps the most famous animal astronaut is Laika @, the Soviet space dog who made her 
‘storie fight on November 3, 1957. The United States preferred to use monkeys for its 
missicna and launched numerous monkey fights primarily between 1948 and 1961 paving the 


way бє manned maswan 
‘Thirty-two monkeys flew in the space program; each had only one mission. Numerous back-up 


Natural selection The :last-child pseudo-selector, “starts with" (^) substring selector 
and first-oF type pseudo-class combined with first-letter in action 
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padding-right:15px; 
Б 


That's great but occasionally there will be internal links that 
begin with httpy/. In that case you don’t want the icon to appear. We can 
work around this exception by adding another rule beneath our initial one 
(they have the same specificity) to nullify the properties set for external links, 
The ^ operator is retained because the link(s) may be going to various pages 
within the site. 


alhrefa="http://"] ( 
background:urltimg/external.png) 100% 50% no-repeat; 
padding-right:15px; 

һ 

a[href^-"htip;/mysite.com"], afhref^="http://www.mysite.com"] { 
background:none; 
padding-right:o; 

} 


Another use case for the ^ operator might be to target links starting with the 
mailto: string and add an icon such as a mail icon: 


alhrefa="mailto:"] { 
background:url{img/email.png) 100% 50% no-repeat; 
padding-right:15px; 

} 


"Ends with” substring selector We've dealt with “starts with", now we'll look 
at “ends with”, The operator for this is the dollar symbol, $ 

The syntax is exactly the same as the “starts with” syntax and common 
use cases include adding icons to represent different files types for document 
downloads or to indicate different feed types, To indicate that a link goes to a 
PDF document, we can use: 


alhrefs=".pdf"] { 
background:url{img/pdf.png) 100% 50% no-repeat; 
padding-right:18px; 

Ë 


This method can be used to target апу file type, such as „бос, jpg, atom or xml. 
"Contains" substring selector The final substring selector uses the star or 


asterisk (*) operator, which stands for “contains” This is powerful when we 
wish to target elements that have more than one class applied. It can also be 


Miss Baker and Able's journey gripped the workd's imagination. Appearing on the June 15, 
cover of Life magasins the pair joined a growing lst of woman celebrities to grace the 
magazine's over in 1959, a list which included Chris David Misi] ©, Zsa Zea Gabor [3 and. 
Jackie Kennedy Ü 


Iconic device This example uses “ends with" ($) and “contains” (*) substring selectors 
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Apollod history 


potted history 


Dressing tables Zebre striping using the nth-child structural pseudo-class with ‘even’ 
argument on the left and using the 'an*2' expression on the right 


used to target specific domains within an anchor. We'll use it in the following 
example to highlight those anchors linking to a person's Twitter account: 


alhret*="twitter"| ( 
background:url(img/twitterpng) 100% 50% no-repeat; 
padding-right:20px; 

} 


The same effect could have been achieved using the ^ operator and the value 
http://twittercom, but using the |“) operator helps us save a few bytes. The 
real power of the * substring selector, however, comes when we need to style 


one of the Twitter links differently based on its Twitter handle (eg http://twitter, 


com/chrisdavidmills). To clarify, all the links contain twitter as in the above 
example, but only one contains chrisdavidmills: 


alhref*="chtisdavidmils"] { 
background:uri(img/twitterpng) 100% 50% no-repeat; 
padding-rig 
color:#ifo; 


R 


We could also use the * operator to apply different styling to links pointing to 
the pages of people we've indicated as friends, family members and others 


Using CSS3 selectors, we can 
target elements at an even 
more granular level 


using the XFN microformat, selected via their rel attribute values. For example, 
to indicate that Chris Mills is our friend, our markup would be: 


<a href="http://twittercom/chrisdavidmills" rel="met friend">Chris Mills</a> 


Because there are two values for the rel attribute, it becomes difficult to target 
using the ^ or 5 operator, so * (contains) becomes an option, as does the CSS 
2.1 tilde (~), which targets a whitespace-separated list of words, one of which 
equals the value. Here we'll use the new C553 substring selector +: 


afrel*="friend"] { 
background:urllimg/friend.png) 100% 50% no-repeat; 
padding-right:20px; 

1 


This causes a problem though: our Twitter icon for Chris has been overwritten 
by the XFN icon, because both the style rules have the same specificity and 
the alrel*="friend"] {...} rule appears further down our style sheet. We can get 
around this by adding some additional padding to our friend rule and using 
multiple background images to add both icons placed in different positions: 


afrel*="friend"] ( 
background: 
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Selectivzr 


Selectivzr (selectiviz.com) is a JavaScript library built by Keith Clark 
(www.keithclark.co.uk) that emulates CSS3 pseudo-classes and attribute 
selectors in versions of IE from 6 through to 8. Among its many users 
are high-profile sites such as Dixons, AudioBoo, Authentic Jobs and 
MaagCloud. To set up Selectivzr you need to load an existing JavaScript 
library such as jQuery, MooTools or Dojo and place the script in the 
head of your page within a conditional comment so it is only loaded for 
Internet Explorer. Weighing in at 5kb compressed, it isn’t going to add 
much weight to your page, but do consider the implications of having to 
include a library аз well if you don't already have one loaded. 

Unfortunately, at present it doesn’t simulate all the attribute selectors 
or combinators covered in this article when used with certain JavaScript 
libraries. If it’s complete support you're after then make sure you use 
Selectivzr with MooTools or NWMatcher. Alternatively, you can use 
Selectiver in conjunction with DOMAssistant (www.domassistant.com) to 
enable support for all selectors regardless of which library you use. 

As Andy Clarke says in his book, Hardboiled Web Design, “Selectivizr 
is small, fast and essential in helping us to use the CSS3 selectors we 
need to finally remove those presentational attributes from our HTML. 
it's already become an integral part of my hardboiled web design toolkit 
and should now be part of yours too.” 


url(img/friend.png) 100% 50% no-repeat, 
url(img/twitterpng) 85% 50% no-repeat; 
padding-right:4opx; 
) 


Structural pseudo-classes 

Structural pseudo-classes let us style elements and parts of elements that are 

in the DOM but can't be tarqeted with other selectors. They keep your markup 
dean and efficient, replacing the addition of extraneous classes in your markup, 
either those in the source code or those added dynamically using JavaScript. 


slast-child This is for targeting the last child of another element. We can use it 
to remove the border from the last item in a list, for example: 


nav 


st-child ( 
borderright:o; 
1 


The :first-child pseudo-class was introduced in CSS 2.1 and works іп the same 
way as :last-child except it targets the first matched child of another element. 


tnth-child The :nth-child pseudo-class lets us target one or more specific 
children of a given parent element. It can take the form of a number (integer), 
keywords (odd or even) or a calculation (expression). It can come in hardy 
when you want to style data tables or complex lists (see issue 216, page 78). 
We'll start by showing the keyword value even to add a background colour 

to create a zebra-striping effect on alternate table rows to improve readability 
that might traditionally be achieved server-side, using JavaScript or by adding 
dasses to your markup: 


trinth-child(even) td ( 
background-color:#eee; 
) 


We could achieve the same effect as the previous example using the expression 
оту or '2n40, which means “style every second row”: 


+r:nth-child(2n) td ( 
background-color:fteee; 
) 


lÍ we wanted to reverse the row colouring and have the background 


colour applied to the odd rows, we could use either the odd keyword la 
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or the expression “2n+1° which means ‘every second row starting from 
the first’. The examples below have exactly the same effect: 


treinth-child{odd) td { 
background-color:#eee; 

} 

trnth-child{2n+1) td { 
background-color:#eee; 

m 


Following so far? Good. Using expressions similar to those we've seen before, 
let's assume we want to target every fourth line of the table. Simply use: 


trinthchild(an) td ( 
background color:iteee; 
+ 


How about every fourth item starting from the second row? 


tr:nth-child(4n+2) td ( 
background-colorifteee; 
) 


We can see a pattern emerging. Now let's deal with that smart kid in class who 


"Use them wherever you can" 
Chris Hills on the joy of using CSS3 selectors 


y hris David Mills 
5 
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What are the benefits or drawbacks of using CSS3 selectors? 

Bl: It cuts down massively on presentational markup/attributes, 
which can give benefits with respect to file size and the page being 
less cumbersome to navigate for screen readers and other non-human 
surfers. It also gives you a higher degree of control and flexibility, 
coupled with fewer maintenance pains. nth-child for zebra striping is 
the classic: compare that to using extra class attributes for the different 
styling, which would need to be manually changed every time you add 
data to the table to keep the styling how you want it. 

The drawbacks are few and far between. Yes, browser support is 
patchy in older versions of IE, but then 1 am firmly in the camp that 
believes that older browsers can do without the little bits of extra styling 
that you will be adding in using these selectors. Most of this styling 
should degrade gracefully, meaning that the raw content will still be 
usable for the most part. Of course, some clients will not see it that way, 
but you should start using the new technology as much as possible. 


„net: What's the difference between pseudo-elements & pseudo-classes? 
BL: In general pseudo-elements select parts of content that would 
otherwise require extra elements to set them part, such as a first line or 
first letter. Pseudo-classes select parts of content that would otherwise 
require an additional class or ID to set them apart. Either that, or a 
change of state, 


лес What's the future for CSS selectors? 
It’s too much to answer here so I'd have a flick through the CSS selectors 


level д draft at devwa.org/csswg/selectorsa (yes, CSS4 is what the cool 


Kids are into!). There is some interesting stuff there, such as :matches(). 
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wants to count backwards. Imagine we want to style the first five rows in the 
table. This is achieved using a negative value for ‘n’: 


tranth-child(-n45) td { 
background-color:#eee; 


1 


inth-last-child The :nth-last-child pseudo-class is essentially the same as :nth- 
child but it starts counting from the last element. Using the same expression as 
the previous example we can highlight the last five rows in the table:. 


trinth-last-child(-n+5) td { 
background-color:#ece; 


) 


Also just like :nth-child, :nth-last-child accepts the ‘odd’ and ‘even’ arguments 
and doesn’t have to use a negative value for “n 


only«child We have one more ‘child’ pseudo-class to look at. only-child works 
by targeting any elements when they are the only child of its parent. This 
might come in useful if we have a dynamically generated list that only contains 
only one item, in which case the margins should be decreased: 


ul lizonly-child | 
margin-bottom:2em; 


1 


sfirst-of-type The ‘type’ pseudo-classes tend to work in the same way as 
the ‘child’ classes, the key difference being that the ‘type’ pseudo-class only 
targets those elements that are the same as the element the selector is applied 
to. They're useful when we can't guarantee there won't be any other child 
elements in place. Eg, if an hr is placed between each paragraph, by using 
ifirst-of-type, we сап ensure we target only the paragraphs. Consider an intro 
paragraph contained within a section («section id-"introduction"»). Using 
:first-of-type, we can style the first paragraph within the section, like so: 


introduction psfirst-oF type ( 
font-size:18px; 
font-weight:bold; 

} 


For some extra coolness, we can combine :first-of-type with the ::first-letter 
pseuco-element from CSS 1 (yes, 1) to style the first letter of the first paragraph 
in the introduction. Note that C553 introduced а new double-colon (2) syntax 
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n history 


New order On the left, the basic styling of the list of animals in space, on the right is 
the same list styled using the nth-of-type and last-oftype structural pseudo-classes. 
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Highly recommended Check out the Selectors Level 3 W3C Proposed 
Recommendation, which сап be found at www.w3.0ra/TR/css3-selectors 


for pseudo-elements to distinguish between them and pseudo-classes such as 
hover. We've used the double-colan syntax in the example below although 
Using it for client work can be a bad idea because of backwards compatibility: 


introduction p:first-of type: 
font size:60px; 
float:left; 
width:auto; 
height:50px; 
line-height:1; 


iscletter { 


} 


last-of-type Using :last-of-type, we can achieve the same effect as :last-child. 
To remove the right-hand border from the last menu item, we сап use: 


nav lilast-oftype { 
border-right:o; 


} 


nth-of-type :nth-oftype works in the same way as :nth-child and uses the same 
syntax. However, it can be more useful than :nth-child should there be elements 


For some extra coolness, we 
can combine :first of type with 
the pseudo-element from CSS1 


in between those being targeted. The following example has a section with a 
heading, followed by a list containing images of animels in space: 


«section id="animals"> 
<һ1>Апїта in $расе</һ1> 
«ub- 


<liscimg src-"img/fiypng" alt-"Fruit Flies" /></li> 
<ї><їто src-"imo/albert.png" alt-"Albert Il" /»«/li» 
<li><img src-"ima/mouse.png" alt-" Mouse" /></li> 
<ї><їта sre="ima/tsygan.pnq” alte" Tsygan" /></li> 
<ї><їта src-"img/laika.png" alt=" Laika" /»«/li» 

LJ 

</ul> 

<fsection> 


Now we'll remove the bullet points created by the list, declare a width, float 
each of the list and add some margins:. 


#animals ul C 
list-styletype:none; 
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width:670px; 

1 

animals I [ 
float:left; 
width:200px; 
text-align:center, 
margin-right:35 x; 
margin-bottom:35px; 


] 


Imagine the margins have caused the third list item to drop onto a new row 
but our design dictates there should be three images per row. This provides the 
perfect use case for :nth-of-type to target every third list item (3n) and remove 
the right-hand margin to ensure they don't drop onto a new line: 


#animals li:nth-of-type(3n) { 
margin-right:0; 


1 


As with :nth-child, we can also use expressions (2141) or keywords (add or 
even) to target certain elements. :nth-oftype can also be used to target the 
first item in a group using the expression li:nth-of-type(4) (... which has the 
same effect as using -first-of-type. 


ith-last-of-type Using :nth-last-oftype(1) {...} is the same as using last-oftype 
but, combined with expressions, it lets us count backwards starting from the 
last item, like :nth-last-child. Using our nth-oftype example, we'll move the last 
lonely animal from our list of 10 to the centre by adding a large lett margin: 


animals L:nth-last-of-type(1) { 
margin left:235px; 
1 


only-of-type :only-of-type targets elements whose parent elements have по 
other children of the same type. Imagine we have an article that can contain 
several images but if only one image is included, we may want it to be full 
width. This is where :only-of-type comes into its own: 


article img:only-of-type { 
width:100%; 


1 


empty :empty can be an extremely useful pseudo-class. It 
й >> 
represents an element with no content. Assume we've got a 
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dynamically generated aside in our page: we use empty to hide it if it 
has no content. 
asideempty í 
display:none; 
¥ 


Before we start jumping for joy, a word of warning: if a browser finds a single 
character, or even whitespace, the element will be rendered because it no 
longer correctly matches the :empty selector. It's fine to add HTML comments 
to the markup, but ensure there’s no whitespace. 


In many ways the negation pseudo-class :not() works in reverse to 
other selectors because it enables us to target elements that don't match the 
selector’s argument. Strange, we know, but it’s very practical. A prime example 
would to be style all form inputs that are nat submit buttons: 


input:not([type-'submit"] { 
width:250px; 
border:1px solid #333; 
ii 


This saves us from having to add an extraneous class to a submit button simply 
for styling purposes. Or looking from the other way, it saves having to add a 
class to every other input. That markup {5 looking leaner already, right? 

We can also use the negation pseudo-class during testing to catch 
those things that validation won't. For example, let's say we want to see all 
abbreviations that don’t have a title attribute specified. Just use: 


abbr:not([title]) 1 
outtine:2px dotted red; 
} 


The same technique can be used to highlight images that don’t have an alt 
attribute specified: 


img:not([alt]) 1 
outline:2px dotted red; 


) 


This is a technique Eric Meyer uses in his diagnostic CSS (meyerweb.com/eric, 
tools/ess/diagnostics/). Add the diagnostic file when testing to catch all these 
errors, fix them and remove the file when you're ready to deploy to the site. 


Browser support 
So how does this all work in browsers in the real world? Well, CSS3 selectors 
are fully supported in IE9+, Firefox 3.5*, Chrome 4+, Safari 4+, and Opera 


cone W ЖИШШ 


Who needs PHP? 


Matching sets sitepoint's reference for CSS Selectors explains all sector types from 
levels 1, 2 and з; check it out at reference sitepoint.com/css/selectarref 
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10+ (with three minor exceptions). Support in IE6, IE7 & and |E8 is virtually 
non-existent (IE7 & and IEB support the general sibling combinator and all 
the attribute selectors), but we can get around this by polyfilling with native 
JavaScript or a jQuery library. One useful polyfll we can use is Selectiver 
(selectivize.com) by Keith Clark (see page 81). Alternatively, if we decide that 
some of these sprinkles are only added as enhancements and arer’t crucial. 
for the site's functionality, then it's fine for them not to show in less capable 
browsers. The choice is yours. 

Ore caveat with IE before v9 is that, when it's grouping selectors and comes 
across a selector it doesn't understand, 1t ignores the whole rule. So if we have: 


ul lsnth-child(3n), ul li.last ( 
margin-right: o; 


) 


IE will not recognise the rule. Consequently, we'll need to split them into their 
own rules, like so: 


ul li:nth-child(3n) € 
margin-right: 0; 

} 

ul tilast { 
margin-right: 0; 


) 


Summary 

We've learned that by using powerful CSS3 selectors, we don't need to add 
unnecessary classes and IDs to our markup, ensuring we can truly separate cur 
content and presentation from one another. We've seen how to target the first, 
last, odd or even items in a group. We've also learned how to target groups of 
elements using expressions and those on their own. 

We've seen how to use negative pseudo-classes to help with testing and 
diagnostics. But there are many more C553 selectors we haven't had time to 
cover. These include UI element states pseudo-classes, the general sibling 
combinator, target (which deserves an article of its own), the new double. 
colon syntax of before and ::after and many more. @ 
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before you can progress in your career, says Ryan Downie 


Many website designers (and designers 
e in other areas) do not come to the job 

through a formal process of training 
and education, They just sort of fall into it. The 
problem with this is that you start out with по 
knowledge of basic design principles or what 
makes a design good. 

1 started off this way, as did a lot of my online 
friends. I left my job and ended up designing 
because I had а computer and there was not much 
work around in the village where | lived. | just 
looked around on the internet, found some ideas 
of what | thought was good design at the time 
and then created a design. | was not armed with 
any knowledge about grids, typography, colour, 
hierarchy and so on that an education would have 
given те. Even though my design could have been 
called a success (it got featured in all the galleries 
and noted as a trend setter for 2008 with its 
handwritten fonts), | felt | was missing something. 

Fastforward a year or so and | was designing 
more of the same — browsing around the internet 
for inspiration and jumping into Photoshop and 
putting out a layout. It was only when | started 
to get to know other designers via Twitter and 
IM that | became aware of what | was missing. | 
needed to educate myself, and do it fast, if I was to 
survive in this world of design. 


Self-education 

New designers need to learn and become self- 
educated if they want to progress. This means 
learning design principles, digesting them and 
coming to understand them over time, just as you 
would if you were stillin education. 


The best advice given to me was to question 
everything. Why this colour? What emotion does 
it provoke? What else has it been used for? Why 
does it work? | find that the key to design is to 
question every element's purpose. If it is not 
needed, remove it. 


What | learned 

Here's a sort of checklist of the subjects | studied to 
help me to understand more about design. | hope 
it will help you. 

Grid and layout: The grid helps with the 
alignment, balance and flow of the design. Mark 
Boulton has a fantastic book called А Practical 
Guide to Designing Grid Systems for the Web on this 
matter. Check out www.designinagridsystems.com 


Fonts: With improved web technology, fonts 
have come in to the limelight and it has never been 
easier to find information on them. But don't just 
pick a font because you like it. Do some research 
on it. Most foundries have a description of the font 
and what its purpose is. Use sites such as typedia, 
com for research. Smashing Magazine also has a 
great post on principles for readable typography. 
See www.smashingmagazine.com/2009/03/18/10- 
principles-for-readable-web-typography/. 

White Balance, hierarchy and contrast: These 
three things are hugely important as they move 
the eye around the design. Without these aspects, 
a user cannot be guided. Take a look at what 
Six Revisions says about this and more by going 
to: sixrevisions,com/web_design/using-power- 


for further details. 

Colour theory: What makes colour important? 
Does it provoke an emotional response from the 
audience and, if so, why? Is there enough contrast? 
Sites such as www.colourlovers.com and kuler, 
adobe.com are great tools. 


Downie 
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structure-and-gestalt-for-visual-hierarchy/. 

Design history: Have a look back at design 
movements from the past and learn what made 
them great. Look at designs from the great art 
movements such as Dada, Art Deco, Bauhaus and 
Pop Art. See how they used design principles, 
played with them or deliberately ignored them and 
move on from there. 

Design inspiration: Inspiration hits us all in 
different ways. If you're planning to design a 
website, try not to browse around the web. Instead 
try and get out of the house, go for a walk and 
clear your head. Look at magazines, the packaging 
on a product, a film poster or even movie credits 
from the 60s ... anything to get that spark 


Ryan Downie (www.ryandownie.com) is a freelance 


website designer who specialises in design, front-end 
development and ExpressionEngine development. 
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retro desig 


Naomi Atkinson 


Knowledge needed. Intermediate Photoshop skills, and willingness to play 
with some nifty CSS. 


Requires Photoshop and a CSS editor 
ProjecLtime 1 hour 


The word retro derives from the Latin prefix retro-, meaning 
backwards or in past times. It’s a culturally outdated or aged style 
that has since become functionally or superficially the norm once 

again. It generally implies a vintage of at least 15 years. 

We can be tempted to use a retro style in our work simply because it feels 
cool or different, or because it follows a current trend. But before we dive 
into our sketchbooks or delve into Photoshop, it’s important to examine why 
we're contemplating using the style, and whether it really suits the brief. 

1 suggest you ask yourself the following question: has the brand/product/ 
service been around for a substantial period of time? When you look into 
its history, can you find advertising, packaging or branding that feels retro 
to look at these days? Or, is it simply a service that existed back in the day as 


well as today, such as a milkman or shoe shiner? If the answer 15 no, then ask: 


can the brand/product/senvice be associated with days gone by? For instance, 
a chauffeur or maid service, a reproduction of an older product (VW Beetles 
соте to mind), or a trend that's regained popularity. If the answer to both 
these questions is no, then а retro style might not be the best choice. 


Going retro 

I've created and coded a very simple design to show off what you can do 
with just four images and some nifty CSS. The point of this example is to give 
you some ideas of how to achieve a retro feel simply and quickly, so you can 
incorporate what you've learned into your own designs. 


However, there are a few things to consider before you start working. 
The most important stage before jumping into any designing is to research 
your intended style. Retro can be taken to mean anything from just 15 years 
ago right the way back to whenever your mind or research will let you go. A 
favourite period of mine is the 1920s, because this era saw a huge influx of 
advertising. The primary factors to note for inspiration are colour palettes, 
typography, patterns and illustration style. 

Your choice of font is also very important, because many retro styles rely 
heavily on the use of strong type. Shop around on a few online font sites. 
Keep your findings (whether they be screengrabs, cutouts or books) close by, 
so you can compare your type choices with the style you're aiming for. 


You can create an old-school 
feel by using a mixture of 
textures and patterns 


Next, Id suggest you get your design on paper. Тһе best piece of 
advice I've been given is that your computer is a tool. Never be under the 
impression that you can't design without it — it should simply help you realise 
your designs. 


Getting into Photoshop 

Open the PSD in the example files, and you'll see just how simple this design 
really is. When creating it on-screen, the one thing | kept in mind throughout 
was this: if | can style it with CSS rather than having to use an image, | will. 


Vintage advertising Old posters are one of my favourite sources of inspiration. These are currently hanging in The Wolfsonian, Miami (wolfsonian.org) 
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Starting point In the tutorial files (netm.ag/retro-216), you'll find three textures kindly 
provided by Simon Foster of simonfosterdesign.com 


| was planning to use web fonts, so the only need for images would be for 
texture. | also wanted to refrain ‘rom using any images within the HTML, 
leaving me with clean markup. Although I would never сай myself a coder, | 
feel it's important to know and understand the capabilities — and limitations — 
of CSS. It really does make you a better web designer. 

A handy trick when designing with CSS in mind is to know which layer 
styles in Photoshop best represent the styles created with CSS. Here are some 
of my suggestions: 


Layer style: Stroke 
CSS properties: -webkit-ext-stroke, border 


Layer style: Glow 
5 property: box-shadow (I haven't used this one in the example, but it’s 
worth mentioning) 


Layer style: Drop shadow 
CSS property: text-shadow 


Tip — to get that 1px highlight at the base of your type, try these settings: 
Layer style: Drop shadow; 90 degrees, Distance 1px, Spread 0, Size 1px 
CSS properties: text-shadow: 1px 0 0 ffcolor; 


Textures and patterns 
You can easily create that worn, old-school feel with a retro design by using 
a mixture of textures and patterns. In the example PSD, you'll see I’ve used 
three images for my texture throughout, kindly provided by Simon Foster at 
simonfosterdesign.com/blog/my-work/texture-tutorial 

Blending modes and opacities are key when playing with textures, as 
long as you're planning on creating images from them, rather than trying to 
recreate the effects with CSS. Note that /ме used different blending modes 
and opacity levels on each of the two image layers. When | was happy with 
the effect, | selected a part of the background to create a tileable image from. 
| pulled this into a new file, and used the Offset tool. Select the layer you 
wish to tile, go to Filter, down to Other and choose Offset. Set the sliders to 
either plus or minus 50 per cent of your canvas size, and voila! You may need 
to tweak it slightly (using the Stamp tool, for example). 

Once | was happy with my texture (I tested its tileability by defining a 
pattern in Photoshop; you may prefer just to test it in code), | then saved 
for web as an optimised JPEG. | used this file to then save out two further 
versions — a darker one that | could use beneath my striped pattern, anda red 
version to use within the circle. The only other image | needed to export was 
the striped pattern used at the top and bottom of the design. To create this, 
I simply used a pattern fill, which is in the PSD. Take a look at the exported 
image in the Images folder. Again, we can set it to repeat in the CSS. 
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Select section | selected a part of the background to create a tileable image from, 
pulled this into a new file, and used the Offset tool 


The markup and CSS 

The markup is minimal; there's no need for too many divs or classes. You'll 
see in the example files that this only needs three divs for us to have enough 
hooks to style from. Let's look at the properties I've used: 


Border radius 
Rather than saving out an image, the circle is created by using border-radius. 
Just use the same width of your div: 


border-radius: 350px; 


Not compatible with: 1E7 & 8 


Web fonts 


There are lots of web font services out there, most of which you'll 
already know about. But that's the easy bit — once you've found the 
web font you wish to use, it can then be confusing as to how to 
implement it. In this case | would recommend using Font Squirrel's 
font-face generator. Being creative rather than logical (I'm sure I'm not 
alone here), | find this service extremely straightforward. You upload 
your fonts and download your kit, and it gives you әй the files you need 
along with the CSS. Simple. 


Other services offering web fonts include: 
typekit.com 
for 
myfonts.com 


FONT. src 
SQUIRREL E 


font-face Kit Generator 


About Face Leam about Font Squirrel at fontsguirelcor/fontface/aeneratar 
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Finished article You'll find the PSD and the coded-up version in the example files 


Transform 
This is what we've done to place our type on a slant: 


-webkit-transform:rotate(-10deg) skew(-10deg); 
-mozransform: rotate(-10deg) skew(-10deq); 
-o-transform: rotate(-10deg) skew(-10deg); 
transform: rotate(-10deg] skew(-10deg]; 


Currently not compatible with: IE7, 8 & 9 


Multiple text-shadows 

To recreate that chunky offset shadow on the type, I've used text-shadow 
multiple times. This is a neat trick, just as long as you use solid colours on 
each shadow, rather than RGBA: 


text-shadow: 

4px 9px 0 #3e2016, 

10px 9px о #3€2016, 

18px 9px о #3€2016, 

24px 9px 0 #342016, 

20px 2px O #362016, 

24px 2px о #3е2016; 

/* bottom left blur colour */ 


Currently not compatible with: IE7, 8 & 9, older versions of Mozilla 


Text-stroke 
In the design we can see that the main text within the circle has an 
outline before the shadow starts — this is to recreate a style found in my 
primary research. 

To do this, we use text-stroke: 


-webkit-text-stroke: 3px #8b150f; 
/* stroke weight and colour */ 


It's worth mentioning text-fill-colour here, too. | haven't used this within the 
design, but if you were to use: 


textill-color: transparent; 


along with text-stroke, you would get transparent type with a border. A lovely 
effect, especially for that vintage feel. 


Current compatibility: Safari and iOS only 
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С («3 Retro inspiration 


Robert Opie Collection Pixel Patterns 
www.robertopiecollection.com naomiatkinsonproducts.com 

A great set of books, said to be ће I sell a huge set of pixel patterns 
“world’s largest collection relating | for just $5 — ready to install into 
to British Nostalgia’. Photoshop or Fireworks. 


Flickr 
flickrcom 

Search Flickr for ‘Retro advertising’ 
groups: there's some fantastic 
inspiration to be found. 


Superfluous Textures 
superfluoustextures,com 

A gorgeous set of hi-res textures, 
at a very reasonable price. Suitable 
for print work as well as web. 


Shelf awareness A spread from the 1920s Scrapbook by Robert Opie, one of 
my favourite books on the shelf 


Opacity 

Although it’s a simple one, it’s worth mentioning. By giving my main type 
within the circle a little opacity, we get the texture into the type. It's very 
subtle, but helps it to feel more realistic: 


opacity: 0.75; 
Not compatible with: 1Е7 & 8 


Know all this stuff already and want more geeky designer tips? Check 

out W3C’s working draft on text manipulation to see the potential of just 
how much control we can have over type online at wwww3.org/TR/2011/ 
WI 3-text-20110215/#transforming. 

Finally, what about that awful question people keep asking regarding fall- 
back for older browsers (or in some cases IE)? The answer is: what they don't 
see, they don’t know they're missing. Let's think about it. If someone was to 
view this design in IE8, for example — which is the worst-case scenario along 
with 7 — they would see a square with some lovely web fonts. All the texture 
would still be there, but they wouldn’t get any fancy strokes or shadows, and 
the text would be horizontal rather than on a slant. 

As long as you have clean markup, and none of your styles are required 
for the user to understand its meaning, you have no excuse not to be using 
CSS to your absolute advantage. IEg has come on leaps and bounds, and will 
only get better — this is a truly exciting time for web designers. @ 


About the author 


Name Naomi Atkinson 
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‘Areas of expertise UI design, branding, illustration 
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Check it out at netmagazine.com 


@ Expert tutorials with downloadable source files 
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@ Exclusive interviews with the industry’s big names 
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build a Zoomable 


user interface 


David DeSandro 


Knowledge needed CSS, Intermediate JavaScript 
Requires Text editor, browser that supports CSS3 transforms 


Projecttime 3 hour 


With CSS3 transforms now supported in most major browsers, we 
have the delightful opportunity to create innovative layouts and 
interfaces. No longer are we shackled in our one-dimensional 
prisons, bound to the tyranny of vertically-scrolling sites. 

With the site for BeerCamp at SXSW 2011 (2011,beercamp.com), we at 
nclud recognised an ideal opportunity to bend some rules and try something 
new. | got the idea to leverage CSS transforms for the layout. Instead of 
the typical vertical scrolling site, where you traversed it downwards, this 
would could be traversed inwards. This is sort of design pattern has been 
categorised as a zoomable user interface or 20. 

The BeerCamp at SXSW 2011 was an experiment in using CSS transforms 
to create a new interface design pattern. In this tutorial, we'll build a 
zoomable user interface into a simple page. You'll learn how to use CSS 
transforms to create a zoomable layout. You'll also learn how to use 
JavaScript to hijack scroliing to manipulate the zoom. 

Our example page lists the services of a web development shop. The 
services listed range from the broad to the specific. This content is well suited 
for a zcomable layout, as the subsequent sections are smaller segments of 
the previous sections. By placing one visual element inside another, you're 
visually communicating the relationship between pieces of content. 


Basic layout 
Prior to the ZUI layout, the basic layout is designed for browsers that don't 
support CSS transforms or have JavaScript disabled. The markup looks like this: 


<div id="wrap"> 
<div id="container"> 


Camp classic The website for BeerCamp at SXSW 2011 was an experiment in using 
CSS3 transforms to create а new interface design pattern 
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nav">...</ul> 
<div id="content"> 
«section id="web-dev">..</section> 
«section id="front-end’>...</section> 
«section id="css">...s/sectionz 
«section id="css3">...</section> 
<section i 
</div> <l- Bcontent -> 
</div> <l- #container -> 
</div> <l- wrap -> 


The first draft of the site has the content laid out in the typical vertical 
pattern. This version is necessary as this layout will be used by browsers that 
do not support CSS transforms or have JavaScript disabled. The rest of the 
effects will be built with progressive enhancement. 

For the zoomable layout, we need to consider how each section fits inside 
one another. I've chosen a ratio of 3:1 for the proportion between the current 
section and its subsequent section. This means the parent will have enough 
room for content, and the child container wil still be visible. 

Each section will be 900px x 540px so it fits within most browser windows. 
Subsequent sections will appear to be one-third the full size, 300px x 180px. 
You'll notice this space in the centre of each section has been reserved for the 
subsequent sections to fit inside once CSS transforms are put in place. (See 
Demo 1: Basic layout in the tutorial files.) 

Now we can start adding CSS transforms. First let's add Modemizr so we 
have more control over how browsers will inherit their styles. I've opted to 
use a custom build from the Modernizr 2.0 beta preview that only tests for 
CSS 20 transforms and CSS transitions (modernizr.github.com/Modernizr/2,0- 
beta/#csstransforms-csstransitions-iepp). After adding the Modernizr 
code to our scripts, we can target browsers that support transforms with 
.csstransforms in our CSS. To scale each section inside one another, they first. 
need to occupy the same space. This can be done with absolute positioning. 


Web development 


Front-end 
development 


CMS Integration 


Server-side scripting 


Inside job Each section is inside one another using CSS scale transforms. You'll see the. 
second section within the first, and if you look closely, you'll find the others deeper within 


Scrollbar hijacked Hijacking the scroll behaviour enables users to zoom in to 
inner content on the site. 


.csstransforms ilcontainer | position: relative; } 
«csstransforms #content ( position: absolute; } 
-csstransforms section { position: absolute; } 


Each section needs its own scale set. As the proportion we're using is 3:1, 
each section will be one-third the size of the previous. This can be calculated 
as the inverse ratio to the exponent of the level's zero-based index: 


zoomScale = inverse ratio ^ zero-based-level 

C553 is the principal technology that enables the ZUI for this page. We are 
leveraging scale transforms. The scale of the first level, ttweb-dev, is (1/3) ^ 
О or just 1, so we don't need to set that superfluous style. The scale of the 
second level, #front-end, is (1/3) ^ 1 or 1/3 or in decimal 0.3333. The scale of 
the third level, #css, is (1/3) ^ 2 or 1/9 or in decimal 0.1111. We'll apply this 
value to the various vendor prefix transform CSS properties for all four of our 
subsequent sections. For the sake of brevity, the code example below only 
lists the unprefixed transform property, but in your actual code, remember to 
add all the vendor prefixed versions (-webkit-transform, -moztransform, etc) 


-csstransforms #front-end ( /* (1/3) ^ 1 = 1/3 = 0.3333 */ 
transform: scale(0.3333); 

1 

-csstransforms #css [ /* (1/3) ^ 2 = 1/9 = 0.1111 */ 
transform: scale(o.1111); 

4 

«sstransforms #css3 (/* (1/3) ^3 = 1/27 = 0.0370 */ 
transform: scale(0.037); 

+ 

-csstransforms transforms { /* (1/3) ^ 4 =1/81 = 0.0123456 */ 
transform: scale[0.0123456); 

š 


Awesome! The sections have been transformed to fit inside one another, 
like Russian nesting dolls. (See Demo 2 — Scaled sections in the tutorial files.) 

Each section is positioned inside one another using CSS scale transforms. 
You can see the second section within the first and the others deeper within. 
Now we need to build a mechanism to let the user zoom in. 

To zoom in to a section, we only need to apply its reciprocal scale to the 
sections’ parent content. All child sections will scale up accordingly. The 
scale is equal to the ratio to the exponent of level's zero-base index. The 
second section #front-end has a scale of 1/3, so it needs to be scaled 3x to 
bring it to 100% size, 


zoomScale = ratio ^ zero-based-level 


The scale to view the third level would be 3 ^ 2 = 9. For the fourth level, 
the scale would be 3 ^3 = 27. 
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What's a ZUI? 


ZUI stands for zoomable user interface. The term might be new, but the 
zooming design pattern is a popular concept. Zooming is directly related 
to manipulating scale: how the size of the interface elements compare 
with one another. ZUIs can be found all across the digital landscape. 

Its most literal form can be found in vector applications like Illustrator 
or 3D applications like Google Sketch-up, where zooming translates into 
getting closer in on smaller objects. On the web, the most commonplace 
example is on map sites like Google Maps or Mapquest. 

Plenty of desktop apps have zooming capabilities, Microsoft Word 
and Powerpoint are both able to increase the visible portion of interface. 
Zooming has been built into all modern web browsers, enabling users 
to adjust sites to a comfortable size that they can read and interact 
with. Mac OS X has zooming built into its interface. Holding Control and 
scrolling will zoom the entire screen towards the cursor. 

Several Flash sites have tried to trailblaze the way for ZUIs, including 
zoomauilt.nikkki.net and zoomism.com. Now in the age of mobile, 
zooming has been leveraged to allow devices with small screens to 
display content designed for desktops. The iPhone introduced several 
key behaviours related to zoom. Instead of relying on a UI element, it 
relied on the pinch/spread gesture to control zoom. This behaviour is 
consistent through Maps and Mobile Safari. 

In other words, building zooming into your app might be unexpected, 
but shouldn't be too off-putting for your users, as most of them will 
probably have used zooming in some form already. 


«csstransforms #content { 
transform: scale(27); 


J: 


[See Demo 3 — Fixed zoom in the tutorial files.) Applying a scale that 
increases the size of container will zoom in on its content. 


Scroll 

Leveraging window scrolling is a natural convenient interaction to hook 
zooming into. Along side clicking and pointing, scrolling is a natural 
interaction that anyone with a mouse or keyboard uses. Currently there isn't 
anything to scroll, since the entire page is self-contained in that 900 x 540 
area, But we can fake it by adding an emply element that has height, which 
will serve as our proxy. The markup will be added after #wrap. 


</div> <l-#wrap => 
<div id="ssroller" ></div> 


In the CSS, set an arbitrary height on #scroller. 4000px works as an 
approximate height of the page before we add the scale transforms. 


«sstransforms #scroller { height: 4000px; } 


But we don't want the content to scroll with the rest of the page, so we 
can use fixed positioning to fix the actual content in its same place. 


width: 100%; 


The page scrolls, but the content remains static. Now the fun begins as we 
jump into scripting. 


JavaScript 

The basic idea is that we are going to hijack the scroll event and do 
something with it. Hijacking the scroll behaviour enables users to zoom in to 
inner content. As all this script will only need to run if the browser supports 
CSS transforms, we can encapsulate our entire script in a selfexecuting рака 
function, which will only proceed if CSS transforms are supported. 
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Disabled links You can't make an omelette without breaking a couple of eggs. 
Enabling а ZU! means disabling anchor links. We'll need to develop a solution 


(function(t 
ІҢ IModernizrcsstransforms ) ( return; } 
// CSS transforms supported, continue... 


>> 


Wh 


I'm using a constructor design pattern, Zoomer, to do all the work. The 
Zoomer constructor requires a DOM node, specifically the content container, 
which will be passed in later. It holds properties like scrolled, which will be 
the vertical scroll position, levels, which is the zero-based number of sections, 
and the height of the page in docHeight. Most importantly, we pass it in as 
an event listener to the window’s scroll event. 


// the constructor that will do all the work 
function Zoomer{ content ) { 


this.scrolled = 0; 
this.level 
this.docHeight = document.documentElement.offsetHeight; 
// bind Zoomer to scroll event 

window.addEventlistener( ‘scroll’, this, false); 


The handleEvent method allows the constructor to be used as an event 
listener, so we can properly use this in windowaddEventiistener( 'scroll' this, 
false). É a method matches the event's type, that method will be called. So 
we сап bind Zoomer.prototype.scroll to the window's scroll event. 


Zoomerprototype.handleEvent = functiont event ) ( 
if ( thislevent.type] ) { 
thislevent.type](event); 
à 
k 


Zoomer.prototype.scroll is where the magic will be happening. We first 
need to calculate the current position of the scroll, relative to the height of 
the page. 

this.scrolled is a normalised decimal value, from О to 1, that represents 
the position of the scrolled page. 


Zoomer.prototype.scroll = function( event ) { 
this.scrolled = window.scrollY / ( this.docHeight - window.innerHeight ); 
k 


We can take that scrolled value and use it for our scale value to zoom into 
the content, We can use the same maths we applied with the CSS above, 
except we're now using a percentage. 

Its value goes from 0 to 1, so we need to multiply it by the zero-based 
number of sections. 


zoomscale = ratio ^ ( percentage * levels ) 
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Vanilla JavaScript 


Glancing over the code snippets for this tutorial, you'll notice that jQuery 
old famitiar’s $ is nowhere to be found. Like most front-end devs, | was 
first introduced to JavaScript through jQuery. The jQuery framework was 
especially welcoming with its CSS familiarity and approachable syntax 
that enabled novices like myself to start playing around with the РОМ, 
As I've come to learn more about JavaScript, I've tried to ween myself off 
of using frameworks. There's nothing inherently wrong with them. But 
leaving them for vanilla JavaScript has its advantages. 

Size: jQuery minified comes in at 30kb. Compare that to the 8kb of the 
tutorial script, uncompressed. That's dead weight that can be easily lost. 
Clarity: When you cut out using a framework, you can rely on other 
developers being better versed in reading your code. Frameworks, 

no matter how efficient their API, will always obfuscate the original 
functionality of JavaScript. 

Progressive enhancement: The scripts employed in this tutorial are 
designed only for modern browsers that support CSS transforms. So we 
don't have to worry about building in support for older browsers. 
Modern browser capabilities: Prior to the rise of frameworks like jQuery, 
trying to hook in to any element on the page was tedious, messy, and 
especially frustrating, jQuery made a huge leap forward with its selector 
engine. Since then, browser vendors have clued up and built this 
functionality straight into their own browsers. querySelectorAlll gives you 
the easy selection without having to go through a browser. 


This value can be applied as a CSS transform. We need to set all the 
vendor specific CSS properties for transform with the transformValue. 


Zoomer.prototype.scroll = function( event ) ( 
this.scrolled = window.scrollY / ( this.docHeight - window.innerHeight ); 
var scale = Math.pow( 3, this.scrolled * this.levels ), 
transformValue = ‘scale('+scale+'); 
this.content.style WebkitTransform = transformValue; 
tthis.content.style.MozTransform = transformValue; 
this.content.style,OTransform = transformValue; 
this.content.style.transform = transformValue; 

b 


All that's left is to initialise a new Zoomer instance, pass in the #content 
DOM node, and start it up on: 


function init() { 
var content = document.getélementByld('content’), 
//init Zoomer constructor 
ZUI = new Zoomer( content ); 
} 
window.addEventlistener{ 'DOMContentLoaded’, init, false ); 


Now the content zooms when you scroll. And everybody goes 
"Whooaaaaaaaaa." (See Demo 4 — Scroll to zoom in the tutorial files.) 

If done correctly, when you scroll to the bottom of the page, you'll zoom 
in perfectly to the last section. 


Completion 

Behold what you have accomplished! Not only have you produced a pioneer 
in the realm of web interface development, but you have built it in such a 
way that it will be fun to use and engaging to interact with. Well done! & 


About the author 


Name David DeSandro 

Site desandro.com 

Twitter @desandro 

Areas of expertise Creative programming with CSS and 15 
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Part 6 These 
go to eleven 


rare 


hen your workstation is your 
canvas, there's always room 
for more. More power, so you 
can bring your ideas to life even 
more quickly. More mobilty, so you can work 
wherever your muse takes you, More memory, 
so you can do more things at once. More 
storage. More connectivity. More flexibility. 
Allow us to introduce the workstations 
that deliver more of everything, The Dell 
Precision M4600 and M6600 are the 
world's most powerful 15" and 17" mobile 
workstations, Designed without compromise 
for the most demanding applications and 
challerging environments, they deliver go- 
anywhere productivity and truly extraordinary 
performance 
These ones go up to eleven. 


Amplify your productivity 
Don't let its good looks fool you: Dell Precision 
mobile workstations are genuine desktop 
replacements, eliminating the need for a 
second workstation back at base and mare 
than powerful enough for the most dernanding 
applications and projects, From science to 
medicine, architecture to engineering, Dell's 
mobile powerhouses have the power and 
flexibility to delight even the most demanding 
users 

The second-generation Intel® Core™ i7 
Extreme Edition processors deliver astonishing 
power for the most demanding applications, 
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while impressive AMD® or NVIDIA® graphics 
with up to 2GB of dedicated memory breeze 
through the toughest 2D and 3D tasks. Four 
DIMM slots can take up to 32GB of 1333MHz 
RAM or 16GB of 1600MHz RAM for blistering 
performance, and astonishing 16:9 UltraSharp 
displays are as vivid as your brightest ideas, 
There's even more to the Del Precision 
M4600 and M6600 than incredible 
performance. NVIDIA Optimus knows when 
you need high-end performance and delivers 
it effortlessly, switching to energy-saving mode 
when you don't need full power, and AMD 
Eyefinity technology can support up to five 
displays when docked, There's an extensive 
range of connection options too, including 
DisplayPort, USB 3.0, VGA, HDMI and eSATA. 


Maximise your mobility 
Every Dell Precision mobile workstation 

can be configured with enormous storage 
capacities - up to 15TB in the Dell Precision 
M6600 - enabling you to carry all your cigital 
assets with you, and you can mix and match 
traditional hard disks with super-fast solid 

state storage to boost performance without 
skimping on storage space. Optional FIPS 
certified encryption can keep your data secure, 
and of course RAID storage is available too. 
Easy access removable hard disks make it easy 
to swap between multiple drives, and the Fast 
Response Free Fall Sensor provides superb data 
protection in the event of a fall or drop. 


Powered by 
адыме 


CORE 15 


We've made big improvements to the little 
things, too. Built-in array microphones beneft 
from Acoustic Echo Cancellation for headset- 
free VolP and videoconferencing, "Beam 
Forming" algorithms focus on your voice even 
in noisy environments, while the optional 
light sensitive Dell Webcam delivers true HD 
pictures and video. There's also an optional 
backlit keyboard that enables you to keep on 
working in low-light environments. 


Ease your mind 

We designed our Precision mobile workstations 
for professionals who derrand the utmost 
strength and reliability, We've invested hundreds 
of engineering man-hours and conducted 
intensive testing to optimise the performance 
and reliability our workstations in the 
applications you depend on, ensuring that you 
get peak performance and rock-solid reliability 
all day, every day. 

Our product support is as impressive as our 
hardware. Dell ProSupport provides 24/7 direct 
access to Dell Expert Centres, next working 
day on-site repair and a single point of contact 
for hardware, software and certified application 
issues, and Collaborative Support assists 
with issues involving third party applications, 
‘operating systems and firmware. Is it the 
‘operating system, a driver or a firmware issue? 
Let us do the diagnosis. You've got better 
things to do. 


The Dell difference 

Dell Precision Workstations are designed to work 
as hard as you do We work closely with leading 
Independent Software Vendors (ISVs) to deliver 
unrivalled performance and reliability in the 

most demanding environments, and our Dell 
Precision workstations are built specitically for 
the most demanding jobs in creative, engineering 
and architectural design; web design and 
development; photo editing, finance and product 
design, With the latest technology in our scalable 
servers and storage solutions, Dell is the one- 
source partner to match your IT ambitions. 


To find out more, please 
visit us at dell.co.uk/precision 
or call us on 0844 444 4155, 
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To find out more, please visit us 
at www.dell : 
or call us on 0844 


The world's most powerful 15” mobile workstation with the 
latest, second generation Intel® Core™ i processors. 


Astonishing performance Massive scalability Extreme mobility 

The Dell Precision M4600 is powered The Dell Precision M6600 has It's the little details that make the Dell Precision M4600 such 
by the very latest Intel® Core™ 1 the capacity to match its raw a mobile marvel. The option to spec a backlit keyboard for 
processors, Processor options include performance. With support for low-light conditions. The HD, anti-glare, 100% Adobe RGB 
the blisteringly fast i7-2920XM Extreme four DIMM slots it’s good for 32GB screen that's crisp and clear in any environment. The optional 
Edition, With high bandwidth DDR3 of RAM, and its two dedicated stylus and multi-touch support. ExpressCharoeTM rapid 

RAM and AMD® or NVIDIA® graphics drive bays and additional SSD mini- charging and exceptional battery life, The extensive range 
with up to 2GB of dedicated memory card scale beyond 1 Terabyte - and of 3G mobile broadband, Bluetooth and Wi-Fi connectivity. 
and multi-monitor support it delivers they can be confiqured in RAID 0 Compatibility with the full range of Dell E-Family accessories. 
workstation performance in a sleek, ог1 mode for high performance Designed for the mast challenging tasks, the Dell Precision 
portable package. and redundancy. M4600 is as flexible as you are. 


—. www.dellcreativestudio.com 
| Powering your IT needs 


Celeron. Celeron Inside. Core Inside, Intel. Intel Logo. Intel Atom. Intel Atom Inside, Intel Core. Intel Inside, Intel Inside Logo, 
Intel vPro, Itanium, Itanium Inside, Pentium, Pentiurn Inside, vPro Inside, Xeon. and Xeon Inside are trademarks of Intel Corporation in the US. and/or other countries 


net/july2011 95 


net/technique/backend 


source project 


Scott Chacon 


github : 
=== 
28 5-92-22 pushed to new. feature at en О IG minuton ago nime 


O =a ikan siki 


Watched Repositories. 


ее deleted branch naw feature и о 37 minutes ago 
Сань bach was at 


° 


помала 


thither lad branch my new thing м ыле елата 37 minutes age 


What you'll learn How to create an account; how to add an existing project to Git and push it to GitHub to share 
with the wider community; how to contribute to someone else's open source project on GitHub. 


Knowledge needed Basic Git 
Requires. Git 1.7 or higher 


Projecttime 30 minutes 
Ф When many people hear Git, they think 
GitHub. GitHub is the popular online Git 
hosting service that has brought the 
power of social networks to the open source 
coding community. And as more and more 
projects switch to Git and an increasing number 
of companies and individual developers move 
there to host their open and closed source 
projects, it's becoming ever more important to 
know how to participate in that community. 
GitHub has over 650,000 developers registered 
on the site, hosting more than 500,000 unique 
open source projects and 1.8million total 
repositories. Companies such as Twitter, Facebook, 
Yahoo and Rackspace, among thousands of others, 
use GitHub to share their open source projects and 
take contributions from the larger open source 
community. Many more companies use GitHub to 
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outsource their code hosting needs or find 
developers to hire — learning the site may be how 
you get your next job or what you use when you 
get there. 

last issue we introduced the Git Version Control. 
tool and this month well look at using GitHub. 
We'll see how to create an account, add an existing 
project to Git and push it to GitHub to share with 
the wider community. Finally we'll learn how to 
contribute to someone else's open source project 
оп GitHub. By the end of this tutorial, you should 
feel comfortable open sourcing new projects on 
GitHub as well as contributing to existing projects 
that you discover on GitHub. @ 


About the author 
Name Scott Chacon 


Site GitHub.com/schacon 
) Areas of expertise Git, 
Mercurial, Ruby 

Clients Twitter, Facebook, 
Yahoo, Rackspace, Digg 
Fave radio station KQED 


Sorel E eE ccm 


Git/share your open 


13751244479) Clean pull requests 


Make your commits nice and clean before 
you push them and send a pull request. 
Also be sure to write an understandable 
and useful pull request message when you 
send it, Think about the issue from the 
maintainer's point of view — the easier it 
is for the maintainer to understand what 


you're changing and why, the easier it will 
be to accept. Part of being a good member 
of the open source community and getting 
your work accepted is being clear and 
understood. So don't just fire off a note — 
explain what you're doing and why, 


ЗГТ Download Tower if you (от! yet use. 
Git, you can download the free command line client at 
htip;/gitcm.com, or you can get one of the СЛ». Here 
we'll use Tower, a commercial Mac GUI client with a 30-day 


pi/git 


trial that you can download from hit 


Import and commit code nawnload the 

files from netmag/git216. Unzip the fle and riti the 
directory as a Git repository. In Tower, click Create Local 
Repository then select your path. You can then do your fst 
commit by clicking Stage All and then the Commit button. 


С 


iz 


(oral ecc con 
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| ==: 
| р 0. АА СА. 
Create а new repository то share your project, 
we need to create a repository on GitHub. You should see а 
button titled New Repository on the dashboard you land on 
after creating an account. Click on it and provide a project 
name in the next form to create your new repository. 


Create an account Our first goal will be to push 
this code up to GitHub to share with people. To do this, 
create an account on GitHub if you don't yet have one. Со 


to httos-//GitHub.com/nlans and click on the Create a Free 
Account button then fill out the simple form. 


Add GitHub as a remote repo in rover, 
select Refs > Add New Remote Repository and paste the 
HTML URL found on the project page into the URL box 


оп the form that comes up. Then type in your GitHub 
password and click OK. 


[Fork a repository we have shared some code, 

зо now we should contribute to a project. The first step to 
working on a project in GitHub is to fork it, ie get your own. 
writeable copy. Go to. ib.com/schacon/example 
and click the Fork button to achieve this. 


О Push your code to GitHub in Tower болеак. 
on the master branch in the sidebar and select Publish 
Branch. This pushes your work to GitHub, so you can go to 
your project page and see your published work. From now 
оп you can just click Push to share further updates. 


[noo 


= 444 


В example. 


i 4 


Browse (2 Local Changes) 


h 3 


Clone that repository in order to improve this 
project, we'll need to get a copy locally to edit. Select the 
HTTP URL from the project page and tell Tower to done it 
for us, Go to the Repositories page (command*D), click on 
Clone Remote Repository and paste in the HTTP URL. 


the new_feature branch in the sidebar and select Publish 
Branch to publish it to GitHub. This will create a new branch 
named new. feature on GitHub that the original author of 
the code you forked can now see with all your new work. 


Repositories Fetch м. Push Checkout. = ‘Save Stash 
a Browse (2) 
Stage All 
Tacs ч. Staged Sans Name < туре эге Caine 
uS s io БЕСІ) Portable... 18... 
go |4 README.md Markdow... 1238 
STASHES 
READMEmÓ Oi Too |) Unstaged EP Base 
T chunke, 2 insertions, 1 deletion 
е -1,5 +2,6 88 
1 i Example Repository Readme 
з 2 
. ‘This is an example repository, here for a tutorial. 
| < Ñ Thin is the README for this project, which houses a classy octocat. 
Р xj 
GED 
[e - o Г 


Make a change Now we want to add a feature, so we should create а branch to do the changes in, Create а new 


branch (command+B) named new feature and check it out. Then copy the two files from the original example project into 
this forked repository and commit the new changes. 


ipm а pull request since pur work 1s now 
public and on GitHub, we want to tell the original project 


author to incorporate it into their project. This is 
called a pull request. Go to the forked project page 
and click the Pull Request button to open the form. 
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Fill in and inspect your pull request 

Fill in a convincing title and description of why your werk 
should be incorporated. In the Commits tab you can see the 
list of unique commits you're sending, In the Files Changed 
аны iid rk wae sens sees 


E view pull request discussion once youve 
commented, you can see the comment and all other related 
information for the pull request on the main pull request 
page. Click on the Discussion tab to see how your comment 
and code context is now in the main discussion list. 


М P 


EF] see compare page i you's interested in ene 
of the branches and want to see how it compares to your 
main branch, click the Compare button on the Branch List 
раде next to that branch, This will bring up a view of your 
changed files, a unified diff anda list of commits 


ome E 


Е voor put requests to keop пек et the status 
If your cent ond pending pull request for projects you 
have on GitHub, you can click on the Pull Requests tab from 
your Dashboard. Now that youe participating fn a socal 
coding network this is important. 
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EE] sec image differences wren an image is 
modified, GitHub enables you to use multiple views such 
as side-by-side, swipe, onion skin and difference so you 
can see how it was changed. Once you are happy with the 
уг inl sede ON pet 


Comment on changed line Pull requests 
act as a code review process, and GitHub lets you have a 
‘conversation about the changes before they are accepted. 
Go to the Files Changed view of the request you just sert 
and comment on a line of code. 


Script development 


The GitHub user interface is very nice, but 
if you need to do something different or 
repetitively, GitHub also has a lovely little 
API that enables you to do with a script 
just about anything you can do through 
the web user interface, Visit http://develop, 
GitHub.com to learn more about how 

to script any of your GitHub interaction, 
including existing libraries to make it 

easy to do so in Java, JavaScript, PHP, Perl, 
Python, Ruby and more. If GitHub doesn't 
do exactly what you want, it's possible that 
you can bend it to your will, 


View branch list Now that you have more 

than one branch pushed to your project, you can compare 
them with the Branch List view. If you click on Branch List 
under the Source tab you get a nice visualisation of all your 
branches and how many commits are unique to each, 
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Вине HTML Styles 
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ш sehcon commented on puli request 29 өп 
ШЛЕШ Your profile Now that you're an active and trained member of the GitHub community, make sure you're 


represented properly. Your profile page, found at GitHub,com/lusername|, is how people can see who you are and contact 
you. Be sure to upload an avatar at Gravataccom and fill out your profile. 
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Since 1993, Edge has 
been at the forefront 
of videogame culture. 
On June 7, the next 
generation emerges. 
Look for it at all good 
newsagents, or search 
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тог details or the digital 
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Cloud hosting should be used wherever you can, but don’t 


try to do it alone, says Dan Frost of BrightCloud 


Nowadays it seems as though everybody 
e is hosting their apps in the cloud. But 

funny things can happen — an instance 
crashes or suddenly your traffic dramatically 
increases, for example. It's now tempting to revert 
to the familiar and move to a big server, or launch 
and configure a few more instances. 

Fact is, having more servers isn’t always the best 
way to solve high-traffic problems. You can easily 
throw too much of the wrong kind of computing 
power at the issue. However, there are a few steps 
that can save time and make your app scalable. 


Don’t go it alone 
Cloud hosting isn’t just servers, its about 
infrastructure too. Moving static files away from 
your app server can significantly drop the load and 
static hosting should be used when it can be. Don't 
try and do this on your own, however, as you'll 
have to go through the pain of building scalability. 
Instead you should give the problem to a third 
party, the likes of 53 and CloudFront, or CloudFiles 
from Rackspace, and use it for everything possible. 

Once the database slows down, everything 
slows and this is often the next bottleneck for many 
sites. The quickest and easiest solution for many 
legacy apps is a bigger database server or a cluster 
of database servers. The beauty of using a third 
party such as a relationship database service or RDS 
from Amazon, which provides a managed MySQL 
instance, is that it can be scaled by simply asking 
someone to scale it for you. 

Many people worry about the loss of control 
when their database server is completely managed 


by a third party. The truth is that, while configuring 
everything isn't possible, you still have access to 
low-level things such as logs, which are stored in 
the database rather than the file system. And 99 per 
cent of apps don’t require configuring anyway. 

If your app runs with the least possible memory 
and CPU usage, you can scale across more 
independent machines. If one goes mad because 
a user added 2,000 fridge magnets to his or her 
cart, only a few users are affected. 

Using tools such as xdebug and XHProf for PHP, 
you can slash the rendering time and memory 
of your page. While this might be a new area for 
many, it’s a vital one for making an app scalable 
and something that every team should know. 

Syncing files creates another potential point of 
failure and makes the instances less redundant. 
Маке sure you use plug-ins such as Amazon 53 for 
WordPress for your CMS or platform. 

By using a scalable key-value database that's 
suited to user accounts, such as SimpleDB, you can 
store metadata and allow for data mining later. it 
can also scale without you having to do anything, 
Plugging this into a Rails app is simple: 


require 'simple_record’ 

class MyModel < SimpleRecord::Base 
has_strings :name 

has jnts age 

end 

mm = MyModel.new. 

mm.name = "Travis" 

mm.age = 32 

mm.save 


Email 

Email servers and worrying about how to deal with 
sending thousands of emails is not fun. If you're 
noton AWS, then you should roule all of your 
emails via AuthSMTP or a similar service. But if you 
are on AWS, swap out any email functions for SES: 


rubygems.org/gems/aws-ses. 


ses.send email :to => ['my-tser@example.com), 
"your-userGexample.com!], 
source => "Dan Frost"<dan@3eucom>', 
subject => 'Hi there!’ 
лехі Боду => 'Come and login to our 
amazing new app: http;//app.li 


Sticking your app on the cloud is no silver bullet, 
but by working with cloud services intelligently you 
can take away much of the pain of scaling up and 
focus on the most important thing — your users. 
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sites with Razor 


Phil Winstanley 


Knowledge needed Basic HTML, basic Cit 
Requires. Microsoft's free Web Matrix or Visual Web Developer Express 


Project time Less than you might expect. 


ASP.NET is one of the industry's leading web technologies and after 

nearly 10 years is still under heavy and active development by 

Microsoft and a community of hundreds of thousands of 
developers worldwide. 

Enter almost any corporate site and you'll find ASP.NET in use somewhere 
because of its power and strengths as a platform. 

Razor is the culmination of years of research and active development 
into simplifying the development process and cleaning up the mix of server 
and client-side code that often causes application code to feel messy. Your 
developers will love Razor for its power and your designers will love Razor for 
its simplicity. 

And the best thing is, it's totally free. Tools, database, test server — 
everything you need to get going. You're even given a slick little tool called 
the Web Platform |nstaller to get it installed and set up for you. 

We at Microsoft want to make the web work right and we want to 
encourage everyone to build cool stuff with our software, So we'll give you 


Your developers will love 
Razor’s power; your designers 
will love its simplicity 


a high level view of Razor in this tutorial then let you explore the training 
videos, tutorials and other information that we've put together with our 
partners to help you get the most from our software. We've listed some of 
the best resources at the end of this article 


Syntax 

We'll run through some of the ways in which Razor interacts with HTML to give 
you a good understanding of how it fits into a website by exploring the syntax. 
The code here is using C# (which is very similar to Java and JavaScript) but you 

can also use Visual Basic if you wish. 


Let's start with something pretty elementary and see how to combine a little 
HTML with some server-side Razor. 


<p>The date and time is GDateTime Now </p> 

The HTML rendered will look pretty much as you'd expect. 

<p>The date and time is 01/04/2011 12:45</р> 

So what's going on? Well, the @ character is a delimiter that tells Razor to 


switch on. It will take control from that point on until it runs out of code to 
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execute and then it'll switch back to normal HTML. As you can see, it's pretty 
simple to print out variables you already have access to, but that's not realistic 
in the real world so let's do something a tad more complicated and create а 
block of code with some logic and let it interact with our HTML. 


et 
var TimeOfDay = String.Empty; 
if (DateTime. NowHour < 12) 
{ 
TimeOfDay = "the morning, put the kettle on"; 
} 
else 
it 
TimeOfDay = "about time for a sweet sherry"; 
1 
1 


<p>The date and time is @DateTime.Now and it's @TimeOfDay.</p> 


Again you'll get the kind of HTML you expect, That was important to us when 
building Razor — no surprises lurking in your HTML. 


<p>The date and time is 01/04/2011 12:45 and it’s about time for a sweet 
sherry.</p> 


Hey, but what about email addresses and Twitter names that use the 
@ character? Won't it break? 


Environment visual Web Developer 2010 Express — Microsott’s free development 
environment for web developers, a great tool to get you started 


€—— 
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Colour co-ordinated visual studio Express with a Razor Page loaded into it. You can 
see your HTML and code asp and clean with colour highlighting 


«p»Get in touch with me by emailing philwinstanley@microsoft.com.</p> 
Guess how it renders out as HTML? 

«p»Get in touch with me by emailing philwinstanley@microsoft.com.</p> 
Ahal Yes, we have special support for email addresses; Razor understands and 
recognises them. 

Twitter accounts are a bit different — we can't determine what's just a 
variable and what's your Twitter name so we have to do something a little 
different. The Razor code you'd write would look like this: 

«p»Want to read my tweets? m on twitter as <text>@Plip</text></p> 

Hey, slow down there Microsoft — we have HTML standards for a reason! 

It's okay, seriously: the <text></text> tags are only server side and they'll never 
appear on the client in the HTML 

They just tell Razor to switch off for that section of HTML and skip over it, so 


the HTML will look like this: 


<p>Want to read my tweets? I'm on twitter as @Plip</p> 


Microsoft Web Рәт Instahier 30 


Web Platform Installer The big green button is all you need to get started with 
ASP.NET and Razor. Download it all free from here 


Code-focused with the powerful template engine built into Razor you can see how 
little code you need to get going and lets you focus on your code 


So the Razor engine is clean enough to be able to read and intermix the server- 
side and HTML into one page seamlessly, while being smart enough to let you 
do some really clever things. 


Loops and links 
We've looked at some of the basic Razor syntax and you've seen how slick and 
true to HTML it is. Time to get our hands mucky with some real code now, so 
roll up your sleeves and make a brew, we're going in! 

You often need the ability to iterate over lists of items and perform some 
kind of action; this is commonly called looping or iteration. 

We'll also look more at how you can seamlessly mix HTML and server-side 
code here. 


е 
<h1>Tweeters</h1> 
string [] People = ( "@Plip", "@ScottGu", "@Phazed" J; 
foreach(var Person in People) 


{ 
<p>@Person</p> 


} > 
- 
ШЕСТЕ Give me the tools! 


Installing software is hard on most platforms, especially so on Windows 
because there are so many options. Microsoft understands this and has 
built the Web Platform Installer, which enables you to install everything 
really quickly. Better still, it enables you to install other applications that 
have been prepackaged, such as blogs, content management systems and 
a whole host of other goodies. 


1. Type ‘Web Platform Installer 3.0” into your search engine of choice 

2, Follow the links and whack the big green Download it now button 

3. Select the tools you want - at a minimum grab these if you want to be 
a hardcore developer type: 
* Visual Web Developer 2010 Express 
* Visual Web Developer 2010 Express SP1 
* ASP.NET MVC 3 

4. If you're just looking to build a site and have a play with Razor you 
might find this tool better suits you: WebMatrix 

5. Hit the Install button. 

6. Wait for some awesome free software to download and install. (At this 
point, you might want to make a cup of tea or coffee as some of it’s 
quite big and can take a while to transfer) 
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Never seen a ~ їп a link before? That's cool, it's an ASP.NET specific feature, and 
in Razor when combined with the @Href() method it lets the server resolve 
the path that needs to be created based on where the website is based on the 
server. So let's say your site was under a few folders on http://areatidea.com. 
You might put it somewhere like /test/demosite/ on the server. 

In this instance ASPNET would magicify (technical term) the URLs to be 
‘root relative’, meaning that you can move the site around and the links will 
always work. 

Can you see the difference? 
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<link rel="stylesheet” type="text/css" href=". /. /assets/CorporateDullGrey.css" 
{> 
anaes RINT «a href="htip://some.cloud.stora.ge/files/"><img src=". /../Jassets/images/Files. 


png" /></a> 


Forms 
It's nearly time for me to get a new car insurance quote, so let's build a website 
to give me a feeling for what 'm about to go through. 


Wide variety with Web Platform installer choose anything from Microsoft's tools 


through to open source content management systems and plugins, all at your fingertips. I DOCTYPE hil 
<html lang="en"> 
And the HTML that will be emitted? shead> 
<title>Car Insurance Quote simulator</title> 
<ha>Tweeters</h1> «meta charset="utf-8" /> 
<p>@Plip</p> </head> 
<p>@scottGu</p> <body> 
<p>@Phazed</p> <form action="" method="post"> 
<p><label for="Person">Your name: </label> 
All done <input type="text" name-"Person" /> 
Bam, we've looped over some items and printed them out. Now it's time for </р> 
some links. Let's take а look and see how we use Razor to emit links out to <p><label for=" Amount"»Your current price E<label> 
images and other pages. These examples are all contrived but exist lo show <input type="text” name="Amount" /> 
the features, </p> 
<p><input type="submit" value="Get Quote!" /></p> 
et </form> 
var Stylesheet = "~/assets/CorporateDullGrey.css" ; et 
var ExternalFiles = "http://some.cloud.stora.ge/files/"; if (IsPost) 
var Images = "“/assets/images/' { 
} var Person = Request["Person"]; 
<link rel="stylesheet” type="text/css" href="@Hrei(StyleSheet)" /> var Amount = Request["Amount"]; 
«a href=" @Href(ExternalFiles)"><img src="@Href(Images)Files.pna" /></a> var Quote = "Hey " + Person +", your new quote will 
be £" + Amountasint() * 2; 
What it emits, as with everything Razor does, is exactly as you expect it to be. } 
} 
<link rel="stylesheet" type="text/css" href=""/assets/CorperateDullGrey.ces" /> <ha>@Quote</ha> 
<a href="http://some.cloud.stora.ge/files/"><img src=" /assets/images/Files. </body> 
png" /></a> </html> 
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Downloading within minutes your computer willbe downloading and installing the Straightforward tt realiyis that simple with Web Platform Installer — select what you 
products and tools you've selected want and off you go. The installer does the rest, with no faffing and по mess. 
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Six must-see sites for developers 


[Um 


Microsoft UK Techdays 
www.microsoft.com/uk/techdays 
Microsoft holds a free annual 
conference in the UK that covers. 
all its web technology. 


Enter the Matrix Web Matrix is designed to get you moving fast with ASP.NET 
WebPages and the Razor language, it's clean, simple and really powerful 


There, now we have a realistic car insurance quote simulator, We've introduced 
а few new concepts here — let's run through them in turn 

Just as in any HTML postback scenario, a form is required, ASP.NET takes 
advantage of the form functionality that's standard in HTML to achieve sending 
data from the client to the server. The server needs a way of checking if it's 
working with а postback or a first load — this is managed through the IsPost 
method that you can see in the sample, Once we've established the form has 
been filled in and the IsPost is passing, we need to grab the information the 
client has sent through. This is done by using the Request object and accessing 
the fields. As you'd expect, the server-side code accesses the form elements 
using their name. 

Because Cii is a strongly typed language (this means that a number must be 
a number, a date a date and so on), when we work with numbers we need to 
make sure they're treated as such. 

When we post our Amount field up to the server it comes out of the 
Request collection as a string, so we need to run the AsInt method on it to 
make sure it's a number before applying the insurance industry's standard 
deviation amount to it. 


Proven to be rock-solid and 
scalable, ASP.NET's security 
system is second to none 


So there you have a very simple contrived example to show you how form 
handling works at a basic level in Razor using Cf. 


What else? 

Razor is much more than a bit of HTML and Сё: it's just the markup and 
programming syntax that sits on top of one of the most powerful web 
frameworks available. ASP.NET offers the ability to have Layout Templates 
(sometimes called MasterPages), which make putting together a consistent site 
an absolute breeze. 

What would a web framework be without a robust security and 
authentication system such as the one found in ASP.NET? Proven to be 
rock-solid and able to scale up from a few users to millions, the security 
system in ASP.NET is second to поле, Also, it's rare that you'd ever build any 
website without a database somewhere. With ASPNET and its underlying 
Database Access technology ADO.NET, connecting to anything from MySQL 
through to Oracle or SQL Server is dead simple. 

And what about all that cool client-side code people write? Well, ASP.NET 


fully integrates with JavaScript and jQuery in a clean and simple manner: what’s 


uBelly 
ubellycom 

The official unofficial Microsoft 
blog for developers who can't get 
enough of the web. 


ASP.NET WebMatrix and Razor 
tutorials 
wwwaasp.net/webmatrix/ 
tutorials/ 

А host of step-by-step tutorials 
on ай aspects of programming 
with Razor. 


Full API reference for Razor 
www.asp.net/webmatrix/ 
tutorials/asp-net-web-pages-api- 
reference 

Everything you could need for 
programming ASP.NET in one 
handy cheat sheet-style page. 


Free ASPNET MVC 3 video 
training 
www.pluralsight-training.net/ 
microsoft/olt/Course/Toc. 
aspx?n=aspdotnet-mvc3-intro 
Our friends at Pluralsight have 


made hours of free video training. 


Scott Guthrie's Blog 
weblogs.asp.net/scottgu 

He might be the corporate vice 
president of ће „МЕТ developer 
platform but he's still a geek and 
writes some brilliant blog posts to 
help people get started. 


more, the ASP.NET team at Microsoft actively helps to maintain the jQuery 
project. The web isn’t just about your website though, is it? Luckily we also 
bundle a bunch of helpers for all sorts of other providers such as Yahoo, video, 
email, Twitter, charting, Google Analytics, Paypal, Bing and even Xbox live. You 
can be up and integrated with other systems in seconds. 

Go to www.asp.net to find everything we've talked about and more. @ 


About the author 


Name Phil Winstanley 
3 Site plip.ms 

Contact GPlip on Twitter or errail hi@ptip.ms 

Areas of expertise. ASP.NET, CH, SQL Server, Microsoft web 

stack, XHTML Database driven web applications 

What radio station do you listen to? John Humphrys on 

Radio 4 is my hero. That’s my street cred destrayed. 
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web app with Node.js 


Tom Hughes-Croucher 


Knowledge needed Intermediate JavaScript 
Requires. Моде е, text editor 


Projecttime 1 hour 


not something that you use in your browser; it's more like PHP or 
Rails. Except that it’s not. Node js uses something called an event 
loop to make really high performance applications. 

What's great is that if you've ever written browser JavaScript you already 
know about the event loop. 

When you want to make an Ajax request in the browser you request a file, 
and then you have to wait for it to happen. It's not immediate. Instead you give 
it a callback function that's executed when the response is received from the 
server. That's the event loop. 

You tell the browser that when the event of receiving a response happens 
it should call your function. You've almost certainly used onMouseOver or 
onLoad events too. Events are an essential part of working in the browser. 


Food for thought 
Let's take the analogy of a fast food joint to figure out what this has to do with 
performance. In a fast food restaurant, when you go to order a meal they take 
your order and then give you a receipt with a number. You may now go and 
wait for your number to be called when your food is ready. 

This is event driven. You are not blocking the register while you are waiting 
for your order to be made. 

Imagine if this weren't true. You order your food at the register and you 
don't leave until you have received your order. The cashier can't take another 


o Node js is a server-side framework for coding in JavaScript. This is 


Event-driven Node.js is an event-driven I/O framework for the V8 JavaScript engine. 
This tutorial explains how you can use it to create a speedy web app 
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order until your food is ready. In that model the only way to take more orders 
is to have more cashiers. This is the way that most programming frameworks 
have operated. 

Why the difference in the two approaches? A lot of it is down to history. 
Most programs only had one user in the old days. When we started doing all 
this internet stuff it seemed okay to just create a mini version of the program 
for each user. However it’s not very efficient when you have a lot of users and 


Node,js is not something that 
you use in your browser; it's 
more like PHP or Rails 


a large part of the time it takes your application to run is waiting for stuff 
(database, disk drive, etc). 

But enough with the theory — let's get to coding. We'll try a couple of basic 
things before we get into the meat of it. 

Node is simply JavaScript. However, since it's a server, everything happens 
from the command line. This is only a little scary. 

Typing ‘node’ into the command line puts us into the JavaScript 
environment, like having a console in a browser. 


Enki: $ node 
> console.log('hello world’); 
hello world 
> var myArray = |1, ‘cheese’, { foo:'bar' Jl; 
> myArray 
[ 1, ‘cheese’, { foo: 'bar' ) | 
> document.getElements3yTagName('body')[al; 
ReferenceError: document is not defined 
at [object Context]:1:1 
at Interface.<anonymous> (repl.js:171:22) 
at Interface.emit (events js:64:17) 
at Interface. online (readline.js:153:10) 
at Interface. line (readline,js:408:8) 
at Interface._ttyWrite (readline.js:585:14) 
at ReadStream.<anonymous> (readline.js:73:12) 
at ReadStream.emit (events.js:81:20) 
at ReadStream. emitKey (tty_posix.js:307:10) 
at ReadStream.onData (tty posi 12) 
> 


A lot of the conventions that are used in the browser also exist. Since Node 
uses V8 (the JavaScript engine from Google Chrome], it’s ECMAScript 3- 
compliant with some of the features of ECMAScript 5. 

However there's also the console.log() function that was defined by Firebug. 
We can use it to print data we're interested in. | can also just tell the console 
the name of a variable I'm interested and it will pretty-print it for me. 


ww Firebug 


Web Development Evolved. 


Firebug and Logging 


Having a fancy JavaScript debugger Is great, but sometimes 
the fastest way to fi 


bugs is just to dump as much 
information to the console as you can. Firebug gives you a 
set of powerful logging functions that you can call trom your 
own web pages. 


Your new friend, console.log ewe Pest Prot [ 


Console.log The console.log() function can be used to print data we're interested in. 
You can find out more information at getfirebug.com/logging. 


However, the final line shows it's pretty obvious that there isn't a DOM. Since 
this isn't a browser there's no web page and therefore no DOM or document 
object. We can see what a code exception looks like. Node gives us the error. 
and then a trace of all the files that were involved in the error. As you can see 
by looking at the trace, an awful lot of Node itself is written in JavaScript. 

The console is a nice way to play with Node but isn’t really how we run apps. 
Let's create a simple HTTP web server that says ‘Hello, Net Reader!’ 


var http = require('http!); 

var server = http.createServer(); 

server.on('request!, function(req,res) { 

res.writeHead(200, ('Content-Type""text/plain']); 

res.write( Hello, 7; 

res.end(.Net Reader!’); 

console.log("Responded to: "+ req.connection.remateAddress); 
D: 

server.listen(8o8o); 

console.log(HTTP server started); 


express 


Express route Express is an MVC framework for Node based on the Sinatra framework 
for Ruby. It provides a really easy way to quickly build interesting web applications 
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Introduction to Node.js with Ryan Dahi 
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Video lesson Ryan Dahl, who created the Node.js framework іп 2010, explains how to 
use it in a useful and concise video you'll find at netm.ag/node-236 


The obvious first thing is that Node is the web server. There isn’t any Apache ог 
Tomcat here. Node itself becomes the weo server. In the first line, we include 
the http module that contains a library for serving and making http requests 
We use that to create a new server. Next, we listen to the ‘request’ event the 
server gets, much like onLoad in a browser. When a ‘request’ happens we call a 
function we've defined to send back a response. 


Request and response 

The function gets a copy of the request and the response as arguments, In this 
case we write the http header, and then write some text to the body of the 
response. write() and епо!) do the same thing, except end() also sends the 
response back to the user. For every request we also update the console 

with the IP of who called the service, Finally we tell the server to listen 


Who's using Node.js? 
A lot of really well known companies, plus many you might not have 
heard of, are using Node Js. 

Even your mobile phone could be running Node. HP/Palm ships 
Node on all of their Pre phones, where it's used provide data services 
to the apps. Google and Facebook are also using Node to build testing 
infrastructure for real-time applications such as Facebook chat. 

Some of the most adventurous users of Node, though, are probably 
small startups that use Node to enable them to compete with much 
bigger companies. There are some great examples of this. 

Turkish startup ArcadeMonk decided to use Node js as the technology 
to support its successful Facebook games (its version of the Turkish 
board game Okey has more than a million regular monthly users). 
ArcadeMonk's Cumar Onat told me, "[At] peak hours we have seen about 
15,000 concurrent users. A single server handled the load successfully 
without a single data loss". 

Another reason people really like Node is its ease of use. After tools 
like Rails and Django no one wants to go backwards in productivity, but 
at the same time scaling those platforms can be frustrating. 

1 met Dylan Greene from OPower, who participated in an internal 
hack-a-thon and used Node to build a recruitment site in just a day. For 
him, having a fast JavaScript platform was the selling point. 

“By using Node, | was able to focus on the features people wanted 
rather than worry about silly things like performance or learning a new 
language,” he explained. 

Pm lucky that | get to work with Node every day. But it still makes me 
excited to hear how Node is enabling other people to really have a great 
development experience and solve real problems. 
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apm de а package manager for node. You can use it ке install 
and publish your node programs. It manages dependencies and 


ее other cool stuff 


one bine Install 
аіоли ага 
More Than One Line Install 


бат the code 
Do what tbe READE aa 


= Cool Stuff 


Packages 


Packaging Manager the Node Packaging Manger (npmis.ora) enables you to install 


Express and other third-party nede programs 


on port 8080 and log a message to say the server has started, We can 


start it from the console by calling Node with the filename: 
Enkit" $ node testserverjs 

HTTP server started 

Responded to: 127.0.0.1 


Notice that even though logging the server has started below the response 


line it appears first, because the response line only happens when the server 


is responding to an http request. | can put http://127.0.0.1:8080 in my web 
browser to call it. 


«image hello-world /> 


Sadly, this is not a good web app. Its really fast, but no matter what URL 
on your machine you hit (on port 8080), it returns the same thing. Lets use 
another library to build something a bit more interesting. 

Express is an MVC framework for Node that's based on the Sinatra 
framework for Ruby. It provides a really easy way to quickly build interesting 


web apps. However, because it builds on the power of the http module we just. 
used, its extremely flexible still. We can easily install Express and other third- 


party Node using the Node Package Manager (npm). 


Find packages... 


Enkit" $ npm install express 
npm info it worked if it ends with ok 
npm info using npm@o.3.18 


npm info build Success: express@2.2.1 
npm ok 
Enki $ 


Once we have Express installed, we can call it like we called the http module 
in order to create a server. Express makes it easy to define applications by 
specifying URLs for each function: 


var express = require(‘express’); 

var app = express.createServer(); 

app.get('/’, function(req, res) 

res.send( Hello, .Net Reader’); 

console.log("Responded to: "+ req.connection.remoteAddress); 
Dm 

app.listen(8080); 

console.log(" HTTP Server Started"); 


This looks pretty similar to the previous example but we get to skip some code. 
Also note that app.get() creates a listener for НТТР GET requests to the app and 
we've explicitly specified the URL /. Unlike our previous example this listener 
will only response to GET request to / rather than anything. 

Let's add some functionality. First, rather than just sending raw HTML we 
want to use the MVC features of Express. Let’s lay out our app directory so we 
have all the things we need. 


туарр // Application directory 
|-appjs // The application 

|= public — //Publically accessible files 
| |-images 

| javascript 


сөз 
^— views 1/ View templates. 
The layout is simple: we just need a place to put out publically accessible 
resources and a views folder. Express supports a bunch of template languages 
including Haml, Jade, Embedded JavaScript (EJS) and jQuery Templates. 

Let's make a simple index page. first we need a ‘layout’: a simple template 
that contains the things most often found in pages so you don’t have to repeat 
the same code. Let's make a file called layout.ejs and put it in the views folder: 


<Idoctype html 
«html lang="en"> 
<head> 
<title><%= title %></title> 
</head> 
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<body><%- body %></body> 
</мтіь 


In EJS you сап specify JavaScript variables that should be inserted into the 
template using the <%= 96» tags. The layout has a special variable called body 
thet contains the rendered contents of the page that was actually rendered, So 
lets make a simple index called index.ejs and put that in views too: 


«p»This is my <%= superlative %> index page.</p> 


Finally let's modify the main method of our app to serve up this index page 
inside the layout template: 


app.get('/, function(req, res)t 
res.renderl'index.ejs', (title; My great site", superlative;awescme"]): 
console.log("Responded to: "+ req.connection.remoteAddress); 


% 


We change res.send() to res.render() and pass in arguments for the template 
we want to render and some data in an object. 


Since it’s optimised for the way 
internet applications really 
work, Node is really very fast 


Since we used the „ejs extension, Express knows to use the EJS module to 
render the templates. You might still have to install EIS on your system with the 
command: npm install ejs. 

Now when a page is requested, the data will be passed to our index.ejs 
template. That will be passed as the body variable to the layout.ejs template. 

While this stuff isn’t rocket science, it’s interesting to see just how fast Node 
is, We're building a really basic site but many platforms still struggle to perform 
even with something simple. 

Node doesn't really have that problem. Using Apache Benchmark on my 
MacBook Air (not the world's most powerful computer), | got over 700 requests 
a second without quitting any apps or doing code optimisation: 


Enki $ ab + 10 -c 100 "http://127.0.0.1:8080/" 

This is ApacheBench, Version 2.3 «SRevision: 655654 $» 

Copyright 1996 Adam Twiss, Zeus Technology Ltd, hitp://www.zeustech.net/ 
Licensed to The Apache Software Foundation, http://www.apache.org/ 
Benchmarking 127.0.0.1 (be patient) 

Completed 5000 requests 

Finished 7569 requests 


This is a really important factor in why people choose Node. Not only is itas 
easy as other things like Rails or Django, but since it's optimised for the way 
internet applications really work, it's really very fast. 

To get started with Node, I'd recommend taking a look at the NPM registry 
search.npmis.org) for modules that might suit the way you work, the 
databases you like, and requirements for your system. 

You can get loads of help from our mailing list/Google group (groups. 
google.com/aroup/nodejs). And # you need real-time help, the #node,js 
channel on the Freenode IRC server is very active too. @ 
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Node Knockout 


Node Knockout is the annual Node hacking competition. It's not until 
August but last year's event drew over 500 competitors from dozens of 
countries, The competition is 48 hours long. Teams of up to four people 
compete to build the most awesome thing they can with Node. 

A large team of popular judges assesses the applications and rates 
them. Last year’s judges included John Resig, Ryan Dahl (who created 
Node js), Joe Hewitt (creator of Firebug), Dion Almaer, Brendan Eich 
(who invented JavaScript) and others. In short it’s a great way to create 
something fun and get a lot of credit exposure (and prizes). Last year the 
pool was $40,000 worth. 

Last year’s winners included a lot of real-time app. Games were 
especially popular. My favourite was a massively multiplayer version of 
Scrabble. (You know you're doing something right when a well-known 
board game manufacturer sends you a cease and desist.) Since renamed 
Word Squared (wordsquared.com), it demonstrates what's possible with 
Node, Scrolling infinitely in every direction, Word Squared is hugely fun, 
but only really possible when you have a platform like Node. 


Word play Word Squared (wordsquared.cam), a massively multiplayer version of 
Scrabble, demonstrates just what it’s possible to build using Node 
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It's a knockout Last year the 48-hour Node hacking competition Node Knockout 
drew over 500 competitors from around the world 
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B The .net Awards are 
еге short of a British 
institution and undoubtedly 
one of the highlights in the 
UK web industry calendar. 
What makes them so 
special is the readers of .net 
magazine — some of the 
savviest, passionate and 
knowledgeable individuals 
around. Long may they 
continue. 9 


Join the world's best-selling magazine for web designers and developers, as 

we celebrate the best of the web. Last year the Awards clocked up more than LUN 
95,000 votes, and we want you to help us make this year’s Awards our best ever! 

Nominate your favourite sites, apps and services TODAY! 
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Matthew Wa llis grouptree.com 


Founder of the content management system 
Grouptree Matthew Wallis talks about what it has 
to offer, and how his new product, Grouptree Leaf, 
enables global content distribution without latency 


105 Managing director and founder 
of Grouptree 

Age 42 

Education: BSc in Biology, Exeter 
University 

Previous career (a long time ago) 
Biachemist, potato farmer in Greece 
Online @mattgrouptree, 
www.grouptree.com 


.net: What sets Grouptree apart from 
@ other content management systems? 
MW: The Grouptree CMS isn't just 
another cookie cutter system where you get stuff 
off the shelf and end up with samey sites. The 
whole thing was built from ground up to be really 
extensible and flexible, so we have people coming 
up with all sorts of interesting structures. 
Grouptree is based on a framework, and you 
write МЕТ applications on top of it, which enables 
you to output anything without having to worry 
about the database. It was originally developed 
as an Object Management System, which enabled 
you to manage any form of data in any object 
hierarchy you like. 
When we were trying to sell it, people didn't 
understand what it was, so we tailored it to 


[| manage CMS-type information. So it’s very good 
| at that: the web is very hierarchical, very 
versioned, very multilingual, so the framework 


was fantastic and it fitted beautifully with that 
kind of stuff. 

Because it's built on this base you can extend 
it to do all sorts of things. It’s being used to 
create voice conversations, VXML, and it's being 
used as a Customer Relationship Management. 
system by another client. It's very extensible. 


net: Can you tell us a little about your new 
venture, Grouptree Leaf? 
MW: Grouptree Leaf was originally based 
around the requirements of ane of our 
customers, an international engineering company. 
When their site launched it was a bit slow in the 
United States and in Asia, and we did a lot of 
clever caching using the .NET caching capabilities 
to speed it up, 

But we still had this latency problem: it's 72ms 
before you even get a response from the server 
if you request something from Asia or America. 
We considered а lot of different solutions, 
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including ACaMI, but we found it very expensive. 
and also difficult to manage the invalidation of 

the data. This process spawned the Leaf product, 
which is basically a very light proxy server that 
communicates efficiently with the front-end 
servers, the actual content server. 

When you ask for a page, the Leaf server checks 
to see if it has it cached, and if not goes off to the 
content server, which may be in the UK, and brings 
it back. It's then cached indefinitely, or as long as 
the header says it should be cached. 

That's quite clever, but the really clever bit is 
that as you edit pages in the UK, the system will 
actually go and tell all those Leaf servers, wherever 
they are — you might have one in Asia, one in 
the States, another in Australia — to invalidate 
immediately and get the data again. 


net: Where сап you put the Leaf servers? 

MW: The Leaf servers wil install on any „МЕТ server, 
or could even be in the cloud. We're considering 
using the cloud for the Leaf servers for one of our 
clients, and for dedicated hosting for the database, 
and the admin and the content server. You can use 
Virtual servers in the cloud (Amazon, Azure, private 
or others) to scale up massively and quickly with 
Leaf Servers installed on them. They can be hosted 
anywhere but will communicate back with the more 
complex content server. 


net: What kind of purpose do you see this as 
being really well suited t0? 
MW: We're really gearing up to the enterprise 
end of the market, but it can be used very ricely 
in disaster recovery as well. In the past, we've 
been asked to do disaster recovery where we 
started with a database server, an admin server 
and front-end servers in London - a setup which 
we then duplicated in New York. We then had 
all the trouble synchronising the data between 
the two databases. Now we can put a Leaf server 
in both locations, and they can save locally, so if 
London goes down, the New York one will still be 
running, And it’s a lower cost because you just 
need a single server with a Leaf on it. 
So there are two areas we're aiming at with 
this product. One is global enterprise. It works 
for tnem because they want massive speed and 
good performance, with no any latency anywhere. 
The second is disaster recovery, When people 
ask us for disaster recovery, if they're UK-based 
then we'll suggest two leaf servers, one in London 
and one in New York. What's so useful about them 
is they are really self-managing, so you need а very 
basic .NET 4 setup. You just point the configuration 
file at the content server and start working. @ 


“The Leaf servers 
will install on an 
.NET server or 
could even be in 
the doud" 


Matthew Wallis 


net/july2011 111 
es] Де з 
Sorel ecce com 


Gr 


"ейте НЮ ООА off 


website build-off 
Movie sites 


Three leading web designers accept our challenge to 
engage movie-goers and put bums on seats 


Mock up the homepage for a movie site. 
Consider including trailers and other video 


clips to engage visitors and encourage them ty b 

to find show times and buy tickets online. ke 

It goes without saying that the site should ie / N 
also entertain, provide cast bios and list Ж / \ 


nominations and awards, It’s always а good 
opportunity to integrate social media % 
and offer downloads and/or games. 2 
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Name 2 
Company 
URL 


d it True POF format 
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Anthony Palacios’ solution 


For this challenge, I chose to create a homepage 
@ for Fold, a film by Jason Yim, Trigger's president 
and executive creative director. In this suspenseful 
cross-genre short, the quiet suburban life shared by a young 
engaged couple is torn apart when a schoolgirl, Rachel 
(Winter Ave Zoli), gets invited to the house of Maki (Mei 
Melancon), her shy and mysterious Japanese classmate. 
Movie websites allow designers a bit more freedom to 
play with unconventional layouts and navigation schemes. | 
wanted to push the boundaries on the homepage to create ar 
immediate visual impact. Using an abstract representation of 
an origami crane as the base of my design, | incorporated plot- 
centric imagery to bring the concept to life. 
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Typically, | gravitate towards a grid system when dealing with 
navigation and content, but for this project, | chose to place 
navigation and site features along the surface of the folds to 
create a sense of dimension and tension 

The flames and burning embers would animate through 
a mix of Flash animation and integrated motion graphics 
to breathe life into the site. Paper arrows would provide 
visitors with visual cues to the interactive elements that live 
within the site. 

Playing off the nature of origami, the site would utilise 
Away 3D or Papervision to enable visitors to unfold the layers 
of paper to explore the ‘Fold Experience’, purchase tickets and 
learn more about the making of the film. 


El immediate impact 


Anthony 
Palacios’ 
month 


What have I been 
doing? 

We've been doing 
a lot of work with 
the film studios 
preparing the 
holiday films 
coming out at the 
end of the year. 


Sites Руе visited 

I try to check out 
The Favourite 
Website Awards 

п) at 
least once a week 
to get a sense of 
which direction 
promotional design 
Ís trending. | also 
frequent behance, 
net to check 

ош designers’ 
portfolios. The 
talent on these sites 
is amazing. 


What have I been 
watching? 

іт a huge МВА fan 
in general, but my 
team is the Lakers. I 
watch them as much 
as my schedule will 
allow. My TV tastes 
are all over the 
map. | enjoy Fringe, 
The Office, Modern 
Family, Survivor and 
a lot of Netflix. 


What have I been 
listening to? 
Radiohead, LCD 
Soundsystem, 


Typically, movie websites require a heavier 
load time than most, So it's important that 
when it loads, the site sirikes an immediate 
visual reaction with visitors. 


n 3D perspective 

ideally, Га love to see the site developed 
using Flash's native 3D support, Away3D or 
Papervision. ‘Unfolding’ site content would 
reinforce the themes from the film. 


[73 sharing with friends 

Social networks are a big part of movie 
marketing these days, and rightly so. It’s а 
great way to spread the word about a trailer 
release or updated content. 


Bg Expanded social experience 
Letting visitors bring their own photos and life 
experiences into the site via Facebook creates 
an extra layer of depth, It gets users directiy 
involved in the backstory of Fold. 


Release: Storsags ë Рала 


IEJ atmospheric animation 
Animatinq the fire and burning particles 
immediately brings the visitor into Mak's 
world. It also provides a sense of what's to 
come in the film. 


n Tickets Please 

The site's purpose is to promote awareness, 
bu: ticket sales are just as important. The 
ability to buy tickets and notify friends is 
especially vital for a smaller indie film. 


Massive Attack, 
Cut Copy and early 
New Огде! 


Turn over to 

ee solutions 

from Andreas 
Shabelnikov and 
Alain Emi 
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Andreas 
Shabelnikov's 
month 


What have | been 
doing? 

I've been working 
on a new website. 
for American pop 
and R&B singer- 
songwriter Ne-Yo. 
I've also made a 
video, here on the 
Riviera, for a famous 
local band called 
Spyglass. These guys 
really have talent 
and | was happy that 
my first big project 
on the Riviera was 
with them. 


Sites I've visited 
| browse 


and 


as these are the 
best online sources 
for me. They are 
updated daily and 
show works of 
famous artists and 
designers from all 
over the world. 


What have | been 
watching? 

I watch tutorials to 
learn more about 
cinematography 
and photography. 

1 also checked the 
fourth season of 
Californication and 
Hollywood movies 
Black Swan and The 
Next Three Days. 


What have | been 
listening to? 

l use Spotify when 
Үт working. | love 
Max Richter and 
Jonsi. But when | ат 
in my car, | listen to 
local radio that plays 
random pop-hits. 
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Andreas Shabelnikov's solution 


@ Ny choice is mostly connected with my goals in 


cinematography. I've created a website for a movie 

about a female spy named Susanna. 
Raised by her uncle, an exFBI man, in Namibia, Susanna's 
upbringing and training have all been geared to making her 
the perfect assassin. Susanna journeys stealthily across US and 
Africa while eluding agents dispatched after her by а ruthless 
intelligence operative. As she nears her target, Susanna faces 
startling revelations about her humanity (or super-humanity|. So 
he site needs to show visitors that this is а modem story about 
a female soldier who's fighting for her family and identity 

Dur studio got key art from the XYZ Pictures so we used 

Eurostyle fonts. We used high-resolution images of New York 


шатып 


SUSANNA 


VIDEOS 
GALLERY 
DOWNLOAD: 
GAMES 


opm enea 


[ Navigation sy clicking on the main 
menu buttons in white we get sub-menu 
buttons highlighted in red. | used vertical 


F Susanna me 30 image of susanna 
makes us feel trat this woman fs real. I's a 
reet tool to get more fans as we feel she is 


and other cities visited by Susanna and tied them together to 
create a 360-degree panorama. By clicking on the image ог 
moving your mouse left and right, users can travel between 
different locations, 

HTMLS is not yet advanced enough to fit our requirements, 
so we're using Flash. This technology also offers the possibility of 
sound control on the website. So there will be an option to set 
your volume level and choose a background music track. 

l used Poser and Photoshop to make the 3D characters look 
more realistic and I've attached them to a front view of a main 
page. The animation and effects are done in After Effects. Using 
Photoshop, | desaturated all the images to give them a darker, 
more ‘criminal’ look. 9 


«m 


maya nt 


[EJ Trailer this is one of the most 
important parts of the website — its vital that 
users should watch the trailer when choosing 


navigation and kept it above other elements 
of the site to avoid loss af information. 


п Background panorama the 
moving panorama shows us where Susanna 
has been using maite-paintings of New York 
and African countries. We've avcided bright 
colours to keep this in the background, 
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here waiting for us, ready and willina to join 
forces with us ir her fight for good. 


[Г] Game T get people addicted to 
ата 
based on a scene from the movie in which 
Susanna isa prisoner in a New York ji Scores 
can be shared on social networks. 


their Friday evening movie. We added a 
Facebook button so that they can hit ‘Like! 


FF Audio controller this s very 
important - lots of people hate sound 
background so they can easily find the button 
to switch the sound off. They can also adjust 
the volume and choose their preferred music. 


Alain Emile’s solution 


At first 1 got very excited and was thinking of a movie 
about clinically insane zombies in New York. But 
eventually | opted to take the high road and aim for 
something cute. I've focused on an animated short and used 
my friend Xavi Gallego as inspiration for one of the characters. 
I would design this as a hybrid site, making the top half of 
the page the content area using Flash and deep-linking while 
everything from the title treatment down would be in HTML. 
Why? | think Flash has the best options for you to interpret what 
a movie is about. 
When going the route of a full Flash movie site, its common 
to greet users with an HTML landing page. The fact that Flash 
is not compatible with all devices is not really a problem but it 


DAES UT ESE [' CUM SOCIS UE PONTIBUS FT MAGNIS D 
PELLENTESQUE VVERRA SUSCIPIT ACCUMSAN. INTEGER 10 MASSA 


SED PELENTESUE ACU SEO URNA ORNARE FRINGILLA 
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does mean more work because you would have to develop sister 
sites for tablets and mobile devices. 

With the desktop computer version, you want to blow users 
away to make them want to watch the movie. When they are on 
the go you want to offer them location-based content that will 
make it easier for them to find a theatre nearby. You many want 
to offer mobile-specific functionality or games. This opens up 
the idea of users being able to scan a QR code off a poster and 
watch the trailer right there. Mmmmm. 


Alain Emile’s 


The design should be visually consistent with print and month 
broadcast. It needs to be a seamless transition from medium to What have I been 
medium. Also remember that movie sites get rated, so don’t be | doing? 


afraid to use an age gate for graphic content. This is probably 
the busiest month 
ме ever had at 

The Luv. I've been 
working on various 
movie sites, digital 
integrated campaigns 
for entertainment 
and apparel clients, 
an iPad app and 
content for Sydney 
Fashion Week. I'm 
also developing an 
animated web series. 
Animators, call me! 


1 


Sites I’ve visited 
Twitter and 
Facebook. When you 
follow interesting 
industry people, the 
content comes to 
you. Perfect! 


What have | been 
watching? 

I don’t need crime 
and vampire shows 
when I can get all. 
my excitement from 
my weekly dose of 
Newcastle United. 
This season has been 
action-packed. 


What have | been 
listening to? 

Soda Stereo and 
Gustavo Cerati as well 
as old school bossa 


ШИ A ІШ) 


ШІСІ 


SING ET PHASELLUS COMVALLS 
S PATURON MONTES 
[ 


(NEQUE DIONIS 


MURIS CUI 


Navigation Given how different each 
section of a movie site can be, it's important 
ta keep a consistent and easily accessible 
navigation. Make sure you pack every section 
with as much interesting content you can get. 


Flash and HTML Experts say Flash is 
dead ... maybe, | find it best to work on a 
hybrid site that gives the top content all the 
possibilities of Flash while maintaining the 
title and everything below in HTML. 


TUS RIS MALES 


Сі 


Social media social media 
Integration is key. Not all movies lend 
themselves to a great Twitter campaign but 


JA FAUCIBUS NON ET MEHL DUS UT 


Movie art and trailer As г viewer, 
when | go to a movie site | expect it to make 
me feel like | want to watch that movie RIGHT 


nova and samba. 
Some Astrud Gilberto 
or Jorge Ben always 
makes work easier. 


ме need to ensure that users have the option NOW. What better way to do this than to Have your say... 
to share and ‘like’ the content. greet them with the movie art and trailer? 
Reviews and awards Great movie Contests and ticket giveaways 
reviews and awards are hard to come by, so if — Contests and giveaways should be prominent 
your movie's got them, show them off! Make | bu: not overpowering on the homepage. 
sure you integrate this into your design soit — — Users can easily be thrown off if your call to 
feels organic and part of the movie. action is bigger than your release date. e 
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Site ash.org.uk 

Site owner Nicolas Chinardet 

Brief Nicolas wants a site makeover to help 
overcome resistance to a proposed redesign 


Name Ollie Kavanagh 

Company Kyan 

URL kyanmedia.com 

Areas of expertise Web and 
application design 


@e Founded by the Royal College of 
Physicians in 1971, Action on Smoking 
and Health (ASH) is a charity that works 
to eliminate the harm caused by tobacco. It was 
something of a web-presence pioneer, having its 
first website live by the mid 90s, but since then 
the site has only undergone a couple of redesigns 
and a minimal clean-up as a new CMS was 
‘installed in the backend. 

ASHS web manager, Nicolas Chinardet, felt 
that, given its primary audience of healthcare 
professionals, politicians and journalists, it looks 
“too childlike and lacks gravitas" 

The website is primarily an information resource 
that provides impressively current news and 
reports, but its design didn’t look anywhere near as 
up to date. Web design and technology moves so 
quickly that it can be a challenge to keep a design 
looking current, especially on a budget. 

The Kyan team have noticed how, over the last 
few years, web design has put more emphasis 
оп typography, unique grid-based layouts, richer 
imagery and jQuery scripting goodness and less 
reliance on the information metaphors of yesterday 
(think books, page curls and other shockers) 
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ASH's main page template felt narrow, especially 
at high screen resolutions. The homepage provided 
links to key areas of the site, but lacked visual 
interest and a sense of hierarchy. The text size also 
felt small and the typography plain, 

The main navigation, floating in coloured 
circles at the top of the page, was the focus, yet it 
felt more Fisher Price than serious-minded public 
health charity, The navigation should, of course, 
be visible and available, but it should be the page's 
message that dominates, rather than the tools that 
enable you to navigate the site. 


Primary colours 
The colour palette was overstretched and partly 
to blame for Nicolas's remark that the site looked 
childish, Orange and blue dominated, but the 
additional three 10 four supporting colours were 
distracting, The curving blue ‘toothpaste’ strip that 
ran down the side implied movernent and smoke, 
but felt over-egged and distracting. 

The site evidently contained a lot of rich, useful 
data, which remained partly hidden. | wanted to 


draw on this resource and make it stand out and 
shout as a way of engaging users. My solution 
has been to fill the browser window with a strong 
leading image that stretches the full width and 
centralises the content underneath, 

| feel that ASH is about providing qualified and 
meaningful data — cold, hard facts that don't rely on 
histrionics and melodrama — so, rather than using 
the shock tactics of some anti smoking campaigns, 
I've employed an infographic style. 

| pulled out a juicy UK smoking figure and 
Used this as a point of interest on the homepage 
that changes with each page refresh. It's hard to 
illustrate on the printed page, but it would be fun 
to use some HTMLS juice and suggest a subtle 
smoky movement in the background for those 
browsers that support it (although | don’t want to 
be accused of designing just for web designers). 

To provide a sense of visual hierarchy, I've given 
key areas of the site their own identity on the 
homepage. This is where we can really move away 
from the traditional idea of the page and the page 


“| wanted to make А5Н5 rich, useful data 
— which had been partly hidden — stand 
out, shout and engage users" 


fold. There is no page fold in 2011. It’s been said 
before, but love your scrollbar! This enables us to 
establish a sense of space and air to breathe so we 
don't have to squeeze all the content into a limited 
area. I've designed a deep and rich front space 
that presents the site content in an engaging and 
dynamic way and provides a simple framework for 
presenting updated content. 


Dignified presentation 

I've used a 12-column grid with a 21-pixel baseline 
to allow the type to stand out and provide a more 
pleasurable reading experience. This site is not 
about looking at pretty pictures, but about reading 
and consuming content. 

l used Meta sans type fonts for titles and Meta- 
serif for body copy. Meta was originally designed 
by Erik Spiekermann for the German Post Office, 
and | wanted to carry across some of this gravitas. 
Now, with web versions of these fonts available on 
Typekit, | would use this in the design, providing 
a typographic richness and seriousness consistent 
with an organisation of 40 years standing. 


Ollie Kavanagh 


I've highlighted ASH's policy information on 
the homepage with an interactive policy slider, 
showing some of the current consultations that it's 
highlighting and responding to. Additionally, | felt 
that the online shop section contained some really 
interesting data that should be on the homepage. 

I've toned down the colour palette using the 
strength of the orange in ASH's brand with one 
complementary lead colour and a supporting 
tone to use as a contrast. The full-stop shape that 
finishes off the logotype was carried throughout 
the design as a consistent visual cue, referencing 
the brand without overplaying its hand. A super- 
sized footer provides a complete overview of the 
site content and its sponsors. 

With nothing more dramatic than a reskin and 
a tweak of the website’s organisation — bringing 
ASH's interesting content to the fore — | hope I've 
fulfilled the brief and positioned ASH as the most 
senior smoking awareness body. Of course, what 
you can't see here is the beauty of the code that 
sits behind the design. @ 
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action on smoking and health 
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ASH and the UK Ce quit but half (50) of thos ai 0 
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action on smoking and hea’ | £ 2 


3 ET Logo reversed F Hard lines E interactive stider Ё моге revenue таке footer 
= | reversed the logo and Hard data presented using А simple interactive format By making a feature of А large footer that contains * 
1 placed it on a dark grey large type provides a great for ASH to use to provide some of the content a list of the complete site ear Seared a 
a background to provide a hook for highlighting the an overview of key policy previously hidden awayin — structure will make it easy piensa Lets neve 
El strong contrast between strength of content that information in a waythat the site, and using strong for users to move around, what's changed and why! 
the site header and the ASH has at its disposal. enables the user to explore visual cues to encourage especially on those deep 
Š page content. This makes Тһе deta would change on without leaving the page. users to purchase the pages where the main 
the brand immediately each page refresh, making This could also be used to charity's publications, ve navigation is a scrollbar 
B noticeable, as well as giving for a dynamic entry point. promote other issues and boosted a revenue stream. — away A footer has been 
8 more flexibility for changing This would present ASH agendas that ASH faces or Again I've used the circular — typically treated as a bit of 
D the leading homepage as ап organisation with wishes to highlight, shape as a play on the an afterthought, containing 
image underneath. quality data and a thought- logotype, reinforcing the dry legal statements, 
leader in the field. Here brand identity further, disclaimers and policies, but 
lies an opportunity to offer | like to make them more 
contentious data sets and useful, often including 
to spark opinion. other web content such as 


tweets and bloc posts, 
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boobbaby.co.uk 


net: What was the brief? 
o BB: Husband and wife duo Ryan and Sarah 
Appleton came to us with their idea for an 
online retail business based around breastfeeding 
products, Budgets were small and they needed 
advice. We helped with branding and they were set 
on using Moonfruit as a solution. Given the plans 
they had, we advised early on this wasn't the best 
option. We demonstrated cur own shop, which 
convinced them to secure a budget we could work 
to. The brief was simple ~ create a fun, friendly 
brand and an easy-to-use store that would be 
appealing to parents. 


.net: How did you get from your initial concept 
to the completed site? 

BR: With all our projects, we have a planning 
meeting with the client, get an understanding of 
what they like and dislike, and the ideas they have 
in mind for the site in the future. We then go away 
and research how a product or service is marketed 
in that sector. This enables us to define a vision for 
the site and engineer the information architecture 
that becomes the basis of the user interface. We'll 
illustrate user scenarios with detailed wireframes, 
paying careful attention to all possible user 
interactions, saving us time in the long term. 


E 
a0 
Speed and clarity the uncuttered product tst pages 
‘can be searched and navigated quickly 


Boobbaby. 


co.uk 

From the Project kick-off. Site, users 
inni ard goals are discussed 

beginning... wh Ryan ane Sarah. 
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Ben Bush, Alex Ball 


Both the client and our team can get a feel for 
how each page of the site will interact before it’s 
brought to life. 

Once the wireframes have been approved, we 
create design concepts. Because of the previous 
planning stage, we tend to approach all our online 
brands by creating the logo and site alongside 
each other, rather than logo first, website second 
This may not be the most conventional method 
but it works for our team and our clients love 
it. They get lo see the brand as a whole and an 
insight into what we see as the bigger picture. 
Concepts usually consist of a home and sub page 
and once these are approved, we'll mock up only 
the necessary templates and elements that are 
taken into the development phase. 


net: What were the biggest headaches? 

BB: Nothing major. The biggest challenge was 
packaging the functional products on offer in an 
appealing way so customers would want to buy. 


«net: Was it difficult to strike a balance between 
commercial and informational aspects of the site? 
BB: In phase one, not so much. From launch, Ryan 
and Sarah wanted their products to sell first and 
then advice to complement these. Look at most 
online stores and generally similar functions and 
elements are in the same place - some just look 
better than others. We design with these best 
practices in mind and this familiarity aids the user's 
journey through the store so they know intuitively 
where everything is. 

This balance will certainly be more challenging 
in phase two, where the advice and thriving 
community they have built through Facebook 
needs to have more of a presence on the site, 


лек: The site is clean, calm and uncluttered. How 
easy was that to achieve? 

BR: Sometimes, the simpler a website the harder 
itis to design. We considered going in a few 


Multiple wireframes and 
revisions are approved. 
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Brett Robinson 


On brand 404 pages should always be designed with the 
site's brand in mind, and Boob Baby's was no exception 


different directions but ultimately we chose a 
very flat, three-colour palette incorporating the 
traditioral baby blue, pink and neutral cotton. 
This set the tone for the design, which came 
very naturally. 


net: Is working for a small, family-run business 
very diferent from dealing with a big company? 
BB: Not generally. Any website we produce will go 
through the same phased approach from start to 
finish. Its true that bigger clients can be harder 

to work with in some ways, but we always try to 
nominate a few points of contact and decision- 
makers on the client side, which speeds things up 
and helps relations in the long term. 

Having said that, Ryan and Sarah were dream 
clients. The project was turned around in 10 weeks 
because they were on the ball with content and 
communication and understood the designs from 
the off. The designs were approved from concepts, 
which in turn sped the whole project up. 


лек You built the site using your own bespoke 
ecommerce CMS. How did that come about? 

AB: After many years of building websites for a 
vast array of clients, we realised that using off-the- 
shelf code doesn't work. Clients are never 100 per 
cent happy, and maintenance is never as easy as it 
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Offical project start date 
with market and product 
research. Site information 
archkecture drafted. 


Design concepts are shared 
with Boob Baby and final 
creative is approved. 


Development begins. 
Customised banners are 
planned and content 
collation started, 
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Boob Baby 


Navigation 

The header has clearly 
defined areas — brand 
presente, e informatio, 
user lagin/registration 
and expandable product 
aano Thi reduces 
Ze Betusa pees 


[ Basket 


The basket stretches 
dynamically as the customer 
adds products. They can 
remove these or check out 
at any time without having 
to click away from any page. 


Carousel 


Rotating banners reveal new 
products, sale items and 

site offers, framed within 

a design that supports the 
rest of the site's template. 


[ГЇ Products 

A managed spotlight 

area ised o Highlight 
products throughout the 
site, keeping the homepage 
fresh and updated 
constantly. The frames echo 
the one used in the carousel 
but on a smaller scale. 


^ 


The techie bit 


The website. 

was built using 
FHOKE's own 
MS platform, 
which can be 
extended and 
customised to 
match each 
customer's needs. 
The CMS was 
written in PHP. 
and MySQL, using 
the Symfony 
framework. 
Symfony is used 
by such big 
hitters as Yahoo 
and Delicious 
and it brings 
many benefits 
Over basic PHP, 
including caching, 
URL rewriting and 
nice database 
ORM integration. 
We also made 
use of CKEditor, 
jQuery and ISON 
in the build. The 
entire website and 
shop is editable 
through the CMS, 
including all 


Breastfee 
< Pillow 8 
Baby Nes 


Get Emad Exclunives 


SEO data, titles, 
filenames anc 
meta information. 


should be. Off-the-shelf code is always generic and 
not aimed at any one specific user type. 

We decided to create our own platform to better 
complement our offering and ease customisations 
and maintenance down the line. We're on the third 
revision of the CMS, and we tend to rewrite from 
scratch every couple of years as technologies move 
forward. As for licensing, we're starting to think 
that way with our most recent venture, Site Stitcher 


(www.sitestitcher.com), 


net: How easy is it for Ryan and Sarah to update 
tthe site themselves? 

BR: Very. They can log in to the backend and alter 
any area of the site, from the homepage carousel, 
to SEO or new pages, right through to standard 


Lasep] ЕЗІ 


Content creation anc 
uploading, site 
‘optimisation, user testing, 
SEO and tinal payment 
gateway integration. 


Ryanand Sarah are 
shown the beta site. 
Demonstration of the 
CMS and on-site content 
creation follows. 


shop functions such as stock control, postal costs 
and related products. Our CMS is flexible. 

Name Ben Bush 

Job Co-founder and creative 
director 


net: How does the site fare on mobile? 

BR: The original brief and budget didn’t cover a 
site specifically optimised for a mobile shopping 
experience but, as it is, it seems to work well in 
testing on all smartphones and tablets. We realise 
growth in this market is becoming ever more 
popular and an m-commerce solution has been 
talked about in phase two. 


2008. Has worked for IBM. 


Name Brett Robinson 
Job Co-founder and art director 
URL www.fhoke.com 

History Brett has worked at 
several UK agencies with clients 
such as Subaru and MTV. 


-net: What's the feedback been like? 

BB: Extremely positive. The customer base and 
sales are growing on an almost daily basis and 
feedback has been consistently good. & 


Name. Alex Ball 
Job Head of development 

URL wwwapplecado.com 
History. As head of development, 
Alex is a code junkie and makes 
great designs work in the way 
they should. 


Boob Baby's completed 
website goes live, 


Turn the page and learn how 
to produce stylish and detailed 
web buttons 
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net/techéique/now Y we. built 


stylish and 


detaile 


Ben Bush 


Knowledge needed. Photoshop (Novice) 
Requires Photoshop 


Project time 5-10 minutes, depending on skill set 


The website that FHOKE built for Boob 
o Baby (boobbaby.co.uk) features a 
stripped-back version of a stylised button 

we often create for our clients. This simpler style 
complements the simplicity of the overall design, 
but still follows the basic stages in creating a more 
detailed web button. 

In the six steps below, we're going to walk you 
through the fundamentals of creating a similar 
button for your site, but using more effects. What 


E3131: f Document creste a transparent 


background document 92px wide by 84px high to 
accommodate on and off states and shadowing effects. 
Turn Rulers on (Ctrl/Cmd +R} and drag a guide from the top 
ruler to the vertical 22px mark to define document halves 


web buttons 


we want to create is a button with the attention 
to detail that some websites or designers miss. It's 
these little touches that will finish the overall look 
of any site if done right 

The final file you'll end up with will not only 
look great, but will give you a button sprite with a 
rollover state that you can then set up using some 
basic CSS techniques (CSS background sprite and 
CSS text image replacement). 

The button's actual colours and features 
aren't important. The tutorial acts as more of a 
guide to help you understand layer styles, rather 
than creating multiple layers which will give you 
the same effects. You'll be able to apply these 
techniques to buttons with rounded edges or even 
to circular calls to action. @ 


Double Click Hero. 


Н create moose the Rectangular Marquee toot and 
drag the shape over the too half to 90px wide by 40px high. 
FIDA hater colour ou have, asi docsrt matter 
{Ctrl/Cmd +0). Double-click on the Shape layer in the Layers 
Palette to access Layer Styles and choose Gradient Overlay. 


Т Styling ror the le Color stop, use a dark orange 
#022026 and for the right Color Stop, use a lighter orange 
#e65d25. Choose OK. Now choose Inner Shadow. Set Blend 
to Normal, Colour white ӚН, uncheck Global Light, Angle 
90, Opacity 50%, Distance 2px. Then choose Drop Shadow. 
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Shadowing sc: Blend to Normal, Colour back 
#ocoooo, Opacty 50%, uncheck Global Light, Angle 120, 
Distance 1px, Sze 2px. Choose OK. Select the Horizontal 
Type tool (T) set to Arial, Bold, 18px, anti-aliasing Smooth, 
and colour white #fíffl. Type in the tex. 


137512944) Get the source files 


If you're finding it tough to get going on this 
tutorial or are getting stuck at any point, you 
can download the source files used in this 
tutorial from FHOKE' site. 

Simply visit our blog, www.fhoke.com/ 
blog, and search for ‘Stylish and Detailed 
Web Buttons’ 

The article covers the tutorial you're 
reading here in full and contains a 
downloadable link containing the Photoshop 
PSD file and image sprite PNG. 

Feel free to reuse or modify for any of 
your personal or client-based projects, 


[Й styting акк into Gradient to bring up the editor 
For the left Color Stop, burnt orange #e45d2c, For the 
right Color Stop, orange #ec8350. Choose OK. Now choose 
Stroke. Se Size to ру апа Position to Inside. Set the Fil 
Type to Gradient and click ito Gradient to bring up editor 


Final touches pouble-ciick text layer. 
Choose Drop Shadow. Set Blend to Normal, Colour dark 
Orange #tda2d26, Opacity 100 96, uncheck Global Light, 
Angle -90, Distance 1px. Select layers and duplicate. Move 
to bottom and reverse Gradient Overlay for on state. 
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(bove)  /Segment 
brand & non-brand search 
trafic Alice Greening 
— "Look at your keyword 
report and decide which 
keywords are brand and 
non-brand" 


126 


128 


129 


(below) / 
False flags? — Mike 
Williams — "It uses more 
than 30 antivirus tools to 
determine whether a file 
is malware or not” 


discover > 


- .. /Make your 
listings engaging 
David Deutsch offers some tips for 
increasing clickthrough from your 
search engine listings 


22222: /WordPress: 
the choice is yours 

The world's favourite blogging and 
content management platform comes. 
in two versions. Karl Hodge debates 
which you should choose 


--- fralse flags? 


Mike Wiliams investigates a program. 
that uses dozens of tools in one ‘hit’ 


Analytics = Í 
importance of cookies 


Hugh Gege explains how a new EU 
directive may affect web analytics 


222 (Неге today, 


gone tomorrow 
You need to hold onto people's 
attention, says Wendy Tan White 


Ecommerce | ë 
Pushing brands online 


Retailersare usinq online magazines to 
promote brands, says Fadi Shuman 


above) Accessall areas CSS sprites — "Using CSS. 
sprites can cause a significant problem for people 


This month's selection 
of advice and opinion 
from the web industry's 
leading professionals 


who override the default CSS" 


122 


127 


134 


experts > 


Expert advice 


Columns from Guy Utley and Alastair 


Campbell plus your questions 
answered by Dave Chaffey, Jon Fell, 
Wendy Tan White, Usman Sheikh 
and Kenny Meyers 


Opinion 
No digital community in your area? 


Why not start one yourself? Trevor 
Morris explains how to go about it 


Big Question 


15 the EU ePrivacy directive a good way 


to handle privacy concerns? 


net/web_pro 


(above] f 
WordPress: the choice is. 
yours — KarlHodge- 
“You can't install plugins 
on the hosted version” 
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expert. advice 


Backlinks worth thinking about. | recommend using the issue, but 1 hope you are able to help out or give 
1 know that the Google ranking of a site is, in Google Keyword tool to compare the number те some guidance. 

large part, based on backlinks, but how do you of local searches for these phrases. It From: Adrian Sugden 

find out how many people are linking to your site important to select “Exact Match” to get the Jon Fell: There are a couple of points that 
and who they are? most accurate idea of number of searches. you need to consider in relation to the 
From: Dervla Taking the mobile example, we see that in website you have developed and host for 


Dave Chaffey: That's right, backlinks matter, 
so you should tool yourself up. The best 
free solution is to set up Google Webmaster 
Tools on your site and that will show you 
the significant inbound links, according to 
Google. Since you can learn a lot from who 
is linking to your competitors, I'd recommend 
using the Linkscape or Majestic SEO services. 
The latter has useful filters and measures ‘or 
identifying quality links. 

Majestic has similar data, but also a useful 
backlink history tool, which | find useful for 


the last month fcr the UK, Google estimates. 
1,500,000 for the singular and 1,000,000 
for the plural. That's typical; people are 
often looking for a single product. Given 
this behaviour, it's important to target 
both singular and plural keyphrases within 
your copy and external links to your site. 

If you take a look at the top results for 
phone queries, you'll see that many of 
the companies use both variants in the all- 
important title tag. 


your client. The Data Protection Act 1998 
imposes obligations on data controllers only 
in relation to the processing of personal data. 

In this respect, a data controller is the 
person who decides what personal data is 
going to be collected and how it will be used. 
The good news is that, from your description, 
your client is the data controller. This means 
that there are no obligations imposed upon 
you by the Act. 

However, for the purposes of the Act, 
you're acting as your cient’s data processor. 


benchmarking a site against competitors. the Data protection The definition of processing under the Actis 
number you should compare on is unique If I provide hosting for a website I've developed so Wide that it includes storing the data and 
referring domains. for a client, which includes a database containing even just seeing it. 
š usernames, passwords and email addresses for The bad news is that while the Act doesn’t 
E! Plural keywords controlling access to the website, along with impose any duties on you, it does oblige your 
š Many of my keywords are plurals, because that’s postcodes, where does the responsibility for the client to do so. In fact, your client is obliged 
a how I tend to search myself. Am а minority? Do Data Protection Act sit? by the Act to enter into a written agreement 
most people search on the singular version? Is it with myself, because I'm storing the data with you to ensure that you process personal 
From: John (obviously it's protected by passwords) or does it data only in accordance with your client’s 
Dave Chaffey: How your sites perform for sit with the client because they're the owner of instructions and that you take appropriate 
plural and singular keyphrases is definitely the data? | realise this may seem a fairly simple technical and organisational measures to 


Focus on... 3D animation fundamentals 


Megezines Downtoad th Trus PD 


3 What does the animation need to say and achieve? similar work you've already done, or even examples 
т How long will it be? This is essential, as it sets the Ot someone else's work, so that they can see the 
1 %- ате Guy Utley tone for the campaign and means you can also idea through your eyes. 
8 p _. HOB Creative director decide what the big idea is. If your animation is going to feature a voiceover, 
1 'Gompany! Digital Consortium Storyboarding comes next. This is a balancing now is the time to find those perfect dulcet tones. 
JURE. www.digitalconsortium, act between making sure you get across all the Give as much information as you possibly can to the 
souk facts without the animation ending up being voiceover artist about what you want. They'll need 
too long, overly complex or plain boring. The to understand the tone of the animation and see 
scriptwriting should be done at the same time,as е storyboards. 
Now that the web is more capable of delivering these two elements go hand in hand. Make sure Һе Now you can get stuck into the fun bit — the 
3D animation, web designers are increasingly storyboards and scripts are signed ой completely animation. It may seem like a long way round, but 
looking to incorporate elements of it into belore you set your sights on any creative work, everything else needs to be in place betore you start 
their campaigns, However, a project involving This leads to the next stage — working up on this stage. 
animation needs to be planned meticulously о the concepts and helping the client to get it. It's The animator has an understanding of what the 
ensure the results meet the brief. Otherwise, you — essential to get their buy-in and ensure they're on — style is and has the voiceover to give him or her the 
risk wasting money or disappointing a client. your wavelength; otherwise, when you unveil the timings and rhythm to follow. 
The first things to confirm are the fundamentals | finished piece, you might see their jaws drop rather The final piece of the puzzle, if appropriate to the 
of the animation - who is the target audience? than their eyes light up. Show them examples of campaign, is music. Like the voiceover artist, this can 
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/your experts 


Design Development Legal 
Usman. Kenny Jon Fell 
Sheikh Meyers Partner 
Å Information Kenny works for a lon worksst 
architect Facebook as а commercial law 
and managing director marketing webmasterand firm Pinsent Masons, and is 
Usman is the MD at discusses nerdy stuff at one of the founders of legal 


Contrive Digital Ltd. 
www.contrivedigital.com. 


thenerdery.net. 
kennymeyers.com 


keep the data secure. Such agreements are 
known as data processor agreements. All of 
this comes from the seventh data protection 
principle, which imposes security obligations 
on data controllers. Your client also needs 
to review your performance and check 

that you're complying with the obligations 
imposed upon you. So, while it’s your client’s 
‘obligation to comply with the provisions of 
the Act, if it does its job right, it will impose 
contractual obligations upon you. Security 
obligations are always tricky. 

You want to avoid a provision that says 
you'll provide adequate security. If there is a 
security breach, then arguably your security 
is inadequate. Rather, you should set out in 
the agreement the security steps that you're 
going to take and then commit to taking 
them. In that way, you'll be in breach of your 
obligations only if you fail to do what you 
said you were going to do, rather than there 
being a breach of your security measures. 
Further information is available on the 
Information Commissioner's website at 
www.ico.gov.uk. 


Copyright in fonts 
| want to create a free PDF ebook to go on my 
personal website. Can I use any font on my 


Looking good Digita! Consortium’ Mortgage 
Microsite for Yorkshire Building Society (www.bs,co.uk/ 
findamortgage) features some cool animation 


make or break the animation, so don't scrimp or 
be tempted to go for an offthe-peg piece, Make 
sure the composer is well briefed, otherwise you 
could end up with literally anything 

And that’s it, job done. You can crack on with 
the project safe in the knowledge that, thanks to 
your perfect planning, there won't be a hiten or 
hiccup in sight. @ 


advice site OUT-LAW.com. 
www.pinsentmasons.com 


commentator Dave advises 
businesses on all aspects of 
digital strategy and practice. 
www.smartinsights.com 


Brought to you by 


World’s No.1 Web 
Hosting Company 


Marketing Business 
Dave Chaffey Wendy Tan 
Digital marketing White 
consultant, Entrepreneur 
author and Wendy is the 


co-founder of free site builder. 
Moonfruit and marketing 
director of Gandi.net. 
wiww.moonfruit.com. 


"Security obligations are always tricky. 


You want to avoid a provision which says 


you will provide adequate security" 


system for the ebook? Or will I need to buy a 
licence for each one? 

l am especially keen on using Arial and 
Sylfaen. These are created by Microsoft and given 
away with Windows XP. However, an online 
search revealed the latter can be downloaded 
only after purchasing it. Please can you clarify 
the law regarding the embedding of copyrighted 
fonts in PDFs? 

From: Chris Hester 
Jon Fell; Forts are protected by copyright. 
As such, the use you can make of them 
will depend upon the terms of the licence 
granted to you by the copyright owner. 
Microsoft does impose restrictions on the 
use of its fonts. Unfortunately, it's a matter 
of considering the position in relation to a 
particular font. That being said, Microsoft 
generally permits the embedding of its fonts 
in documents. 

The issue that arises is the extent to which 
the document can be edited by the user. If 
you're publishing your documents as PDFs 
and lock them so that no changes can be. 
made, then | don't consider that you'll have 
any problems from Microsoft. However, you 
should check the terms on which the fonts 
have been provided. Help is at hand on 
the Microsoft site, where you'll find a page 
headed “Font Redistribution FAG”. 


Disclaimer 

Within the forum on my niche sports site, I'm 
offering an opportunity for users to advertise. 
kit for sale or swap. No money transactions or 
guarantees will be made by my site - it will be 
an opportunity to post adverts online. 

To cover my back, how would my disclaimer 
have to read? So far, | have: “This site is not 
involved with the actual transaction between 
vendor and purchaser and accordingly is not 
responsible for goods sold, swapped or bought 
within this site.” Is this enough? 

From: Melanie 
Wendy Tan White: | would suggest looking 
at disclaimers on sites such as eBay and 
Freecycle and reviewing your disclaimer 
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accordingly. These sites have been around 
for a long time and have probably fallen 
victim of most occurrences, so will have 
more detailed disclaimers. eBay's can be 
found at pages.ebay.com/help/policies/user- 
agreement.html?rtenc and Freecycle is at 
www freecycle.ora/about/disclaimer, 

Once you've put together a disclaimer 
you're happy with, you could always run it 
past a lawyer, in order to make sure it covers 
everything you need it to. 


Ads 


1 can't make people click my ads and, on Google, 
you earn nothing if you have 1,000 impressions 
and zero clicks. Before you say it, | don't think | 
have a problem with the ad relevancy, placement 
or colours. Is there any equivalent to AdSense 
that pays you for impressions, not clicks, that you 
can recommend? 
From: Oliver Handsworth 
Wendy Tan White: There are a few 
alternatives to Adsense available, However, 
it's about choosing the right one for you 
and your site. Some depend on how many 
site impressions you get, whereas sorne 
don't have any limitations. CPM (cost per 
month) or tenancy advertising are two 
good ways to guarantee income and will give 
you more control. 

CPM means that advertisers will pay you 
based on the number of page impressions 
of an advertisement, and are usually paid 
per thousand impressions [enwikipedia.org/ 
wiki/Cost_per impression). Tenancy-based 
advertising, on the other hand, involves a set 
price for an agreed period of time, based on 
your site visits and regardless of how many 
people click on the banner. 

You can either source advertisers 
personally or find an agency that specalises 
in this type of advertising. Have a look at 
companies such as Context Web, formerly 
AdsDag (www.contextweb.com/), Ybrant 
Digital (wwwybrantdigital,com/publishers 
and Value Click Media (www. = 
valuectickrnedia,com/), If you run а 
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SY) blog, there's a company called ebuzzing 
(www.ebuzzing.co.uk) that “brings 
bloggers and advertisers together” Basically, 
once you sign up with ebuzzing, you'll 
be sent campaigns to cover and be paid 
either per article or per click per play (in the 
instance of media posts). 


Writing copy 
Рт currently working for a (very) young 
web development agency, so young that we're 
still developing our own website. No one in the 
office is good at producing copy for the site and 
the boss won't consider hiring someone to do 
that for us. What would be the best approach to 
produce some respectable/decent content for a 
business with quite a small portfolio? 
From: Omar Campos 
Usman Sheikh: That is, unfortunately, a very 
common problem, A lot of businesses don't 
understand how important well-written copy 
is and what a major impact it can have on 
a brand. A good copy writer doesn't just 
write text to fill up web pages, they work 
with you to understand the personality 
of the company, figure out exactly what 
you're trying to achieve and who your 
target audience is, and then writes concise 
messages that reflect all of that. 

If you feel this is а battle you simply 
cannot win with your boss, then | would 
suggest you have a team brainstorming 
session, Get all the key people around a table 
and try to understand what is it that everyone 
is hoping the website would achieve for 
them and, most importantly, who the target 
audience is. Once you know who the target 
audience is, try to put yourself in their shoes 


and think about what sort of information 
they would ideally like to see. If nobody in 
the office is good at writing copy then try 
to keep it as short as possible — just to the 
point. Also, have a look at your competitors’ 
websites and the market leaders in your 
industry to get an idea of how they're 
showcasing their work. 

Іт sure that ance you've done enough 
research, you'll know what needs to go on 
your own website as well. 


Insurance 

I'm a freelance, self-employed web developer, 
working mostly with other agencies but with 
quite a few small/medium-sized projects, where 
I'm doing the build direct for a client. 

My question is: Do | need to take out some 
kind of insurance, in case | get sued by a client? 
I've been lucky enough not to have needed it in 
the past. However, in these litigious times | guess 
there could be a possibility of getting sued by a 
client if his site goes down and he loses business, 
or due to anerror on the site that prevents 
people purchasing, for example. 

Obviously, | don’t want to have to shell out 
for an insurance policy if | don't need it. If | write 
some specific terms and conditions that І send 
out with every quote would that cover me? Or 
do clients have some sort of statutory rights that 
the terms and conditions can't overrule? I look 
forward to any advice that you might have! 
From: Laura James 

‘Usman Sheikh: Considering that you're 
simply a freelance web developer, /4 think 
that having a good set of terms of business 
should provide you with enough cover. I'd 
recommend taking some professional help in 


‘A lot of businesses don’t understand 
how important well-written copy is and 


what a major impact it can have” 


Expert tip of the month 


Pro photography 
1 have a client who wants a complete ecommerce 
site for his photography business, which is mainly 
weddings-based, and | wondered if there are any 
solutions worth looking at to make it easy for 
them. They may want to upload 700 photos ata 
time — easily! 
From: Fiona 
Wendy Tan White: There are various sites you 
could try. It depends on what look and feel 
your client is trying to achieve. 
FolioLink (www.foliolink.com) is a good 
all-round solution. It offers various packages 
that start from $99, so is the most expensive of 
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the options. It allows you to download a free 
seven-day trial package. 
Another good solution is Photo Biz 
m). This programme is 
more affordable than FolioLink and you 
can purchase individual add-ons for а more 
personalised setup. Photo Biz offer a 30-day 
money-back guarantee if you're not satisfied, 
Finally, my very own service Moonfruit 
(www.inoonfruit.com) has a large community 
of professional photographers showcasing 
and using the ecommerce features to sell their 
work. It's affordable, flexible and easy to use 
and offers various packages. ® 


drafting the exact terms, which would ensure 
that you're covered in most cases, 

Once you have your final T&Cs then 
make sure that they are part of your order 
confirmation, or a similar document that 
needs to be signed by the client before any 
work has been initiated. 


Tool please 
1 love Firebug and the web development toolbar. 
Му company is updating several sites and | 
usually start off with some old CSS, JavaScript, 
etc. Is there a tool out there that identifies 
resources not being used? 
From: Tracy Lester 
Usman Sheikh: The closest thing that | can 
think of is the Dust Me Selectors plug-in for 
Firefox (addons.mozilla.org/en-US/firefox/ 
addon/dust-me-selectors). It enables you 
to check individual web pages or spider 
through an entire website and check which 
CSS selectors are not being used. | hope that 
helps you! 
Kenny Meyers: You can use Firebug to 
check which CSS and JavaScript files are 
downloaded with each web page. It's 
called the Net tab and, when activated, 
shows you every item that a web page 
downloads to display. 
All you have to do is enable it and verify 
which resources are being downloaded 
and used. If you're trying to find an easy 
automated solution, | don't have one, sadly. 


.МЕТ vs PHP 

NET or PHP, which is the best and what are the 

pros and cons of both? 

From: Nigel Millen 
Kenny Meyers: Comparing .NET and PHP is 
like comparing apples and grocery stores. 
They're two different things. МЕТ is a 
framework and PHP is a language 

When you're working in .NET, you're 

generally working in Cit or ЕВ. When you're 
working with РНР, you're working with 
PHP. There ave, however, frameworks such 
as NET for PHP. 


moos 


Good all-rounder Foliotink offers various options, 
starting at $99, and a free trial package 


The general belief is, if you work in PHP. 
the cost is lower. PHP is open source and 
freely available for everyone. Technically, NET 
has an open source version called Mono, but 
most people who use .NET use Microsoft 
products, which include SQL Server, Visual 
Studio, etc. 

Cit is a compiled language, PHP is 
not. Сё is, in my opinion, a better-written 
language. Visual Studio is an incredible 
programming tool. PHP is a mess. However, 
PHP is fast to get running and a great, albeit 
somewhat convoluted (syntax-wise), gateway 
into programming for the web. 

Ask yourself this — do you need a quick, 
cheap website? Use PHP. Do you want to 
build a fast website with well-supported 
software? Use Cit and .NET. 

These are simplifications. It's all about 
what you're comfortable with and what you 
can build with. 


Screen readers 

What are your opinions on offering screen reader 
capabilities for an individual website? We use 
BrowseAloud, which over the last 12 months has 
been downloaded 212 times from our site. 

We're trying to ascertain how many people 
use BrowseAloud to access our content. Should 
we provide this feature or should we be writing 
code as cleanly as possible, so the user's choice of 
accessibility software works with our sites? 

From: Miss Karen Gandy 
Kenny Meyers: Write good, semantic code 
that's not dependent on JavaScript and is 
descriptive of its content. BrowseAloud 
ignores the mobile web, which is where a 
growing majority of content and material is 
being consumed. @ 


Send your questions on marketing, the law, 
business, design and development to us at 


Jeedback@netmagazine.com 


jonsors . 
xpert Advice 


.net's Expert Advice section is sponsored by 
1&4 Internet, www.land1.co.uk, a global 
leader amongst web hosts. 

With around 10million customers 
worldwide, and 11million domains under 
management, 1&4 is well placed to deliver a 
high standard of service. 

181 has just released a brand new range 
of 181 Dual Hosting packages that provide. 
ultimate security through geo-redundancy. 

This means your website exists 
simultaneously in two high tech data centres. 
With superfast connectivity, unlimited traffic 
and powered by green energy, no other web 
host offers as much expertise, know-how and 
quality as 181. 

More details at www.1and: 
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Access all areas 


CSS sprites can bring some interesting advantages to your work. Alastair 
Campbell explains how to steer clear of some of the potential pitfalls 


One of the high-performance techniques that 
has grown in popularity is the use of CSS-sprites 
(www.alistapart.com/articles/sprites). Using 
one background image and some CSS to provide 
all the icons on a page isa useful performance 
and maintenance advantage. 

There is a ‘but though, as it can cause a 
significant problem for people who override 
the default CSS. This isn't just theoretical either, 
although few users might know how to create 
their own stylesheet and the use of the high 
contrast mode in Windows is more common. 

The ‘high contrast’ label is a little misleading. 
Although it can be useful for people with 
moderate visual impairments, I've come across it 
more often in relation to cognitive impairments. 
Some types of cognitive impairment, such as 
dyslexia or being on the autistic spectrum, can 
make certain colours impossible to work with. 

The high-contrast modes can be used to 
adjust the colour scheme of Windows and most 
applications, including your browser, 

In some cases, it’s used to take away a bright 
white background, or it might be that yellow is 
too bright. It’s not always an easy thing to predict, 
which is why it has to be dealt with at the user's 
end of the equation. 

When you try a high-contrast mode (and | 
recommend giving it a qo if you're on Windows}, 
one thing you'll notice is that background images 
disappear. All of them! 

From a usability point of view, I've always 
recommended including text with icons anyway, 
but there are some occasions when that's not 
practical, For example, including text labels in a 
WYSIWYG editor with buttons such as bold, italics 
and bullets 

There are several possible solutions, depending 
on your situation: 


Use foreground images. With alt text, of course, 
so long as the icon is clear, foreground images are 
generally an accessible solution, but as it increases 
the HTTP requests, it’s slower to load 

ТІК Design created a CSS technique to use 
ene foreground image and employ CSS to show 
only the correct part of it. It's similar to using 
CSS (background) sprites, but the images don't 
disappear in high-contrast mode. See tikdesian. 
com/articles/how-to_use_sprites_with_my Image 
Replacement technique.asp for details. 

Detect high-contrast mode using JavaScript and 
provide alternative links (e.g foreground images) 
when it's detected. 

The last of these is my least favourite, but the 
technique of detecting high-contrast mode can be 
useful for other situations. You could download 
the AXS library from AOL (devaol.com/axs), which 
offers the axs.hd() function. 

If you don't want to include the whole 12k 
4minified) JavaScript file, you can search through 
the source code for hcfunction). It's quite 
straightforward to recreate separately. It creates 
a div and assigns it a colour and then deletes the 
element and checks its colour: if it's the same, it 
isn't in high contrast mode. 

Whatever method you use, just make sure 
that important information isn't provided by 
background images. ® 


€ ! Alastair Campbell is director 
of user experience at digital 
agency Nomensa (www. 
nomensa.com). From a 
usability background, he 
discovered technical web 
standards in 2001. 
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Search 


Fortune Cookie's David Deutsch offers 
some handy tips for increasing clickthrough 
from your search engine listings 


Make your listings 
more engaging 


Once you've got your listing to the top 
e of the search engines, you need to grab. 

the user's attention and get them to click 
on their link. It’s crucial to edit every SEO-friendly 
page of your website to show better listings on 
SERPs. Here are some very neat tricks to help you 
make your listings more engaging: 


3. Remember, when people type keywords into 
search engines they're actually asking a question. 
Does your listing answer that question іп a clear 
way? For example: ‘car hire" is actually a request for 
more information on renting a car in the person's 
location. For this reason, Google would show them 
all the local car hire shops near their location in 
Google Maps. So make sure that your Google 
Places listing is up-to-date and optimised. 


2. Use HTML codes to spice up your description. 
HTML offers loads of symbols that you can publish 
in your meta description tags to spice them up 


where appropriate. These symbols can attract 
attention because they'll be very different from all 
the other descriptions on the page 


3. If you're cheaper than most then show it! For 
example, which one would you dick on? ‘Company 
X has been offering the most comprehensive 
widgets to clients since 1999' or ‘Company X is 
offering widgets for £19.95 for a limited time only! 
This is a massive saving of £65!” 


4. Most Google Adwords ad copy is really well 
written to improve your clickthrough rate. Use the 
same technique when writing your SEO meta 
description tags 


5. To make your listings better than your 
competitor's, you have то do better than every 
other listing on the SERP for EACH keyword you are 
trying to target. Remember that the aim of the 
game is to stand out above all others, | 


22222 Segment brand and non-brand search traffic 


Name Alice Greening 
Job title Data analyst 

Company Fortune Cookie 
URL fortunecookie.co.uk 


Using a program like Google Analytics can 

help you make intelligent changes to your SEO 
efforts. One important technique is Brand Vs. 
Non-Brand analysis. Segmenting your ‘brand’ and 
‘non-brand’ search traffic is very important, as 
these visitors can behave in very different ways. 
‘Once you understand these differences you can 
optimise your site to maximise conversion for 
both visitors who already know your brand and 
those who come to you from generic keywords. 
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Dimensions clic« Traffic 
Sources then drag the 
Keyword box to the 
chart on the rignt- 
hand side of the page. 
Alter the condition to 
contains and type a 
brand keyword into the 
value box. Click Add 
Statement under this, 
and continue for all 
brand keywords. 

Name the segment 
Brand Traffic and 

click Create Segment 
Now do the same for 
non-brand keywords. 
Follow the above, but 
change the condition 


1 Split keywords into 
brand and non-brand 
Look at your keyword 
report and decide 
which keywords are 
brand and non brand. 
Brand words include 
your company name, 
domain name, slogans 
and mispellings of 
these. Non-brand words 
are whatever is left. 


2 Create segments 
In Google Analytics, 
click on Advanced 
Segments, then Create 
new customised 
segment. Under 


to does not contain, 
and name the segment 
Non-brand Traffic. 


3 Analyse 

These segments. 

are ready for use 
immediately and can 
be used on past data. 
You can run your usual 
reports and compare 
how these segments 
differ. Compare metrics 
such as bounce rate and. 
time on site to compare 
the effectiveness of 
landing pages and to 
get an idea of what 
content brand and 


This month's 
recommended... 


Name Yellowpipe ASCII 
HTML Character Codes. 
URL yellowoipe.com/ 
yis/tools/ASCIEHTML- 
Characters/index php. 
Info This page has 
loads of useful HTML 
codes that you can 
use in your meta 
descriptions as well as 
the rest of your site 


Name Search Metrics 
URL searchmetrics, 
com/en 

Info Search Metrics 
uses an integrated suite 
of search analytics tools 
that offers access to 
25million keywords and 
5omillion domains. 


Name Google Analyrics 
Features 

URL google.com/ 
analytics/features.html 
Info Google Analytics 
offers huge amounts 

of information you can 
use to make sites better. 
This is a short list of the 
great things you can do. 


non-brand visitors are 
interested in. Also look 
at what content these 
visitors view and how 
it differs. Then you 

can make educated 
decisions on what they 
mean for your website. 


Contact us ... 

Do you have a question 
about search rankings? Use 
the subject ine "Search" 
and email us at feedback. 
 netmagazine.com. 


No digital community in your area? Why not start one yourself? 
Developer Trevor Morris explains the best way to go about it 


Over the past five years Birmingham has 
@ grown a small but dedicated digital 

community, There have been several 
initiatives such as BCCDIY (bccdiy.co.uk) and 
digital agencies across the region are thriving. 

The success of these endeavours can be put 
down in part to the meetups and events that take 
place every week. l'm part of such a group - the 
‘Multipack (multipack.co.uk) which, after more than 
five years, is at the centre of the web community in 
the heart of the Midlands. 

There may or may not be similar groups in your 
area, but there will definitely be people working 
and living there who would love to attend local 
meetups but have no clear way of doing so. 

Here are a few tips on how to foster a local web 
community in your area, based on the experiences 
I've had over the past five years. 

Probably the hardest part for me was getting 
started. Finding like-minded peaple who live or 
work locally and who are committed to making the 
web a better place was a difficult proposition in 
the pre-Twitter world. | found out about the 
Multipack after reading a blog post, leaving а 
comment and then attending the next meetup. 
Nowadays, it's much easier to find people. Twitter 
is an amazing communication tool and resource, 
and there is huge potential and willingness in the 
participants to take the virtual communities into 
the real world, 

Finding a core group that's interested in starting 
a local community is a great start, but there are 
plenty of pitfalls that can stifle growth. Consistency 
is vital. Choose a day, time and venue and stick to 
that every month. For the first two years we moved 


our meetups around the Midlands, trying to 
accommodate as many people as possible. This 
didn’t work very well as some regulars found it 
difficult to attend meetups further afield, After we 
diagnosed the problem, we decided on a schedule 
that enabled members to instinctively know (most 
of the time) when and where the next meetup (or 
the one after that) would be. We decided on the 
second Saturday of the month, at the same time 
and place — this is а common characteristic of 
other successful communities. 


Growth pattern 

Once you've gathered a set of care members who 
attend regularly, start thinking about promotion. 
Set up a mailing list. We send out a newsletter 
once a month, a week before each meetup, to not 
only remind members but to also promote other 
local events, or useful tools and projects built by 
local companies. Start a projact on Basecamp 
basecampha.com) to bounce around ideas. One of 
the most important ideas to stem from our 
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discussions was establishing more formal events 
with set topics and speakers. This is what we called 
‘Multipack Presents: It was originally held each 
alternate month but now it’s expanded to four per 
year, These events were easier to promote than the 
informal meetups, as people saw value in their 
content (although the events themselves are still 
completely free), and word of mouth and general 
interest was also higher. Attendance for these 
events is always increasing, but it also means more 
people regularly attend the informal meetups, 
creating more dedicated regulars, and thereby 
helping to improve the community as a whole. 


Benefits 

Starting (or simply attending Ja local community 
has many benefits. Although the majority of 
people who attend are just there to talk with their 
peers, discuss new ideas or let off steam, it's no 
secret that it's a great networking opportunity — 
the best kind in my opinion. There have been many 
great collaborations between Multipack members, 
bot" professionally and personally. Many of the 
people who attend are either freelance or running 
small businesses, and both of these create job 
opportunities, be they freelance or full-time. 

So, what are you waiting for? If you know of a 
local community, go along and join in, and if you 
don't, start one yourself. You'll be pleasantly 
surprised who you'll meet, what you can achieve 
and where it might take you. 


Trevor Morris (wwwtroystercom) is a developer who 


loves typography and engineering experiences and 
works with both client- and serverside technologies. 
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The world's favourite blogging and content 
management platform comes in two versions. 
Karl Hodge debates which you should choose 


WordPress: the 
choice is yours 


Journalism student Matthew Dyas asked. 
us about the best approach to setting up 
a WordPress website for a domain name 
he already owns. 

WordPress offers you two routes to setting up a 
site, There's WordPress.com — the hosted version of 
the software — and WordPress.org. The latter uses 
the same code, but you host it yourself. 

Which you choose depends on whether you 
value ease of use over functionality It's easy to set up 
and get started with the WordPress.com version. You. 
just sign up for an account and create a blog. There's 
no need to edit or upload code, no databases to 
configure and certainly no DNS editing required. 
However, WordPress.com lacks some of the features 
that users of WordPress.org may take for granted. 

For example, the hosted version has a limited 
number of themes. You can’t create your own and 
editing existing themes is limited to a bit of CSS. 
tweaking and widget editing. Another issue is that 
you can't install plug-ins on WordPress.com. 


WordPress.com offers a range of add-on hosting 
features, if you're willing to pay. These are modular 
and accumulative. For example, to map your own 
domain to a WordPress.com blog will cost $12.00 
(approx £7.40). Adding 5GB of extra space costs 
$19.97 (£12.30). CSS customisation access costs a 
further $14.97 (£9.20) a year. It all begins to add up. 

On the other hand, if you're nat afraid of 
installing the platform yourself, you could sign up 
with a hosting provider and run a WordPress blog 
foras little as £4.99 a month. 

That's what 123-ге 5 currently charging for 
its Plus hosting package, which includes one-click 
WordPress installation, Fasthosts is offering a similar 
package, currently discounted down to £4.49: VAT 
for the first three months — though you'll need 
to buy an additional MySQL database at £25 per 
annum to use WordPress. 

Hosting your own WordPress install gives you 
all the features missing from WordPress.com. We'd 
recommend it over the remotely hosted option. _ 


This month's 
recommended... 


Name Movable Type 
URL movabletype.org 
Info Once the choice 
for pro bloggers, 
Movable Type is still 
sophisticated. Reliance 
on Perl and CGI makes 
it feel old at installation, 
even though the 
backend looks great. 


Name TypePad 

URL typepad.com 

info A relative of 
Movable Type, TypePad's 
had its edges smoothed 
ош, making it a good, 
commercial choice for 
serious blogging. 


Name Drupal 

URL drupal.org 

Info A step beyond 
blogging, it’s a toss-up 
between Drupal and 
Joomla when it comes 
to a robust CMS for 
larger sites. Drupal is 
modular, flexible, PHP- 
based and configured 
for building dynamic, 
community aware sites. 


222222. Karl Hodge reveals a scam targeting domain name owners 


Name Kerl Hodge 
lob IT journalist 
URL www.spodgod.com 


Online scams come recently — but he was 
in many forms. Web disturbed enough by 
developers and people its contents to forward. 
running businesses it on to us. "I think 
online should look domain name owners. 
out for domain name should be warned 
scams of all stripes. about this company" 
Reader Ross Brown he said. And, after 
wasn't caught out by reading the email, 
the email he received we quite agree... 
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Ross Brown's 
website address was 
due for renewal. Hed 
forgotten about it, 
until he received an 
erail reminder. The 
опу problem was, it 
didn't come from his 
recistration company. 
"The email looked like 
an invoice — complete. 
with an invoice number 
and a billing address. 
There was a direct 
link to a payment site, 
demanding 575 (£46) 
to renew my domain” 

Well $75 sounded 
steep for a сот domain 


renewal. And, on closer 
reading, it turned out 
that the “invoice” was 
offering something quite 
different. Your dollars 
bought you a ‘search 
engine registration’, not 
a domain registration, 
Of course, savvy пе! 
readers will be aware 
that there's no such 
thing. You can submit 

a website address 

to individual search 
engines, but you don’t 
‘register’ a domain 
name— and you 
certainly don't have 

to pay a recurring fee. 


We've seen similar 
scams before. They 
usually arrive by post, 
looking like bills or 
invoices, and originate 
from fictional companies 
with names like Domain 
Registry of America 
or Domain Registry of 
Europe. The company 
in this case is called 
registrationdom.com 
= апа a quick Google 
search reveals thatthe 
name ofthe outfit was 
registered last year, with 
first reports of these 
suspect emails dating 
back to December. 


I you receive an 
email from anyone but 
your original domain 
registration company 
asking for money, 
beware. In this case, 
Ross saw through the 
scam straight away. — 


Watchdog 

If you have a complaint. 
about your ISP or host, use 
the subject tine "Watchdog" 
and email feedback@ 
netmasazinecom 
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One antivirus engine just isn't enough — 
so Mike Williams investigates a program 
that uses over 30 of them in one swift hit 


This month's 
recommended.. 
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Maximum malware 


detection or false flags? 


antivirus tool and you might think you're 

safe — but the truth is a little more 
complicated, No antivirus engine guarantees 
complete protection, they'll all miss some 
threats, and even an impressive-sounding "99 per 
cent detection rate” still means one per cent of 
malware may penetrate your defences. 

In theory, installing a second antivirus package 
should help: it’s unlikely that both engines would 
have the same blind spot, and so the second will 
probably pick up anything that the first could miss. 

But, of course, that's rarely possible. Installing 
multiple antivirus packages usually results in all. 
kinds of conflicts and problems, and even if you 
do find two that work together, the drain on your 
PCS resources will probably slow your system 
down to an unacceptable degree. 

There is an alternative, though, in the form 
ofthe free WinMHR (ywww.team-cymru.ora — 
oddly, despite the name, they're not Welsh). 

This program will scan your running processes, 
specified folders, files or entire drives, scanning 
executable fles just like any other antivirus tool. 

Unlike the competition, though, WinMHR then 
calculates a hash value (a digital signature) for 
each file, and sends it to a central server. This value 
is checked against the program's Malware Hash 
Registry, which uses more than 30 antivirus tools 


How to 
Scan for 
infections 


15 your PC unstable, crashing, 
behaving so oddly that you 
wonder if it’s been infected? 
If your regular antivirus 
software can’t find anything, 
then maybe you're OK — but 
don't take that for granted. 
Running WinMHR will 
quickly give you a valuable 
second opinion. 


@ Equip your PC with a regularly updated 


to determine whether 
a file is malware or not. 
Once the scan is finished, 
WinMHR will let you 
know what passed the 
test, and what didn't. 

In our test, the report 
had many false alarms 
— perhaps inevitably 
when using so many 
different antivirus 
engines (and combining 
their mistakes, as well as 
their better points). So 
you have to treat it as a starting point for research, 
not the end: you'll have to Coogle the filenames. 
WinMHR has highlighted and see what comes up. 

Even more seriously, WinMHR won't remove 
the files it's named — the program's about malware 
detection only. If your web searches reveal that you 
really have been infected by something, then you'll 
have to figure out how to get rid of it yourself. 

WinMHR is best suited to experienced PC 
users, and is no substitute for a full antivirus suite, 
Still, if you think your system has been infected 
by something but your regular security package 
hasn't raised an alert, it’s a quick and easy way to 
get a second opinion. That's why it deserves to be 
included in every PC owner's security toolkit, - 


1 Launch WinMHR and the 
program will immediately scan all 
your running processes for signs 
of malware. Hopefully you'll just 
see a big green tick at the top-left 
of the screen, which means it's 
spotted no dangerous files, 


3 To scan a drive, click the Files 
tab, Scan Drive > Quick Scan and 
then choose your drive, Just 33 
minutes later, on our test PC, 
WinMHR delivered its report, 
with several malware suspects 
highlighted at the top of the list. 


Release: StorsiMags «(Fantail 


Checking it out 
The WinMHR authors 
ave aven treated 

a Firefox add-on that 
scans your downloads 
for threats as well 


Name VirusTotal 
URL virustotal.com 
Info Upload an 
executable file to 
VirusTotal's free web 
service and it'll scan 
it with all the main 
antivirus tools (and most 
of the minor ones), then 
let you know which, if 
any, think it's malware. 


Name G Data AntiVirus 
URL gdatasoftware, 
co.uk 
Info G Data has 
combined the Avast and 
BitDefender engines 
into a single product, 
and independent testing 
shows this has worked 
— G Data AntiVirus is 
very accurate malware 
detection software 


Name AVERT 
URL avertsoftware.com 
Info AVERT is a free 
tool that enables you 

to scan your PC with 
antivirus engines from 
Asquared, ClamWin, 
Trend Micro, Panda, 
Sophos, Avira and 
VIPRE (these have to 

be installed separately, 
but that’s easy), 


2 If WinMHR hes highlighted an 
issue, though, or you just want to 
explore your system further, then 
click the Processes tab. Here you'll 
see all your running programs, 
and any DLLs or other support 
files they're running. 


4 WinMHR detects lots of 


== EE malware, but also names innocent 
= = files sometimes, If you see 


something you know is a false 
alarm, report it (right-click, select 
Report False Positive) to help 


MJ. improve the program's accuracy. 
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analytics tools, says Hugh Gage — but 


WEB | 
Analytics 


new privacy laws put therri under threat 


The invisible hand 
on the web 


Much of what happens on the web is 
guided by the invisible hand(s) of 
cookies, little pieces of code that are 

stored on a user’s computer by the web browser. 

Types of cookie include first-party and third 
party, The latter are used extensively in the 
advertising industry, are not directly associated 
with the host site and as such are often seen as 
potential spyware. The former are considered the 
property of the host site so are more likely to be 
seen as legitimate. Google Analytics, for example, 
uses only first-party cookies. 

There are also session cookies, which expire at 
the end of a visitor session, and permanent 
cookies, which stick around for longer. Permanent 
cookies are used by analytics tools to indentify 
unique visitors and also to distinguish between new 
and returning visitors — something often dear to 
the hearts of many site owners and directors 
because a returning visitor is, more often than not, 
likely to be more valuable than a new visitor. 


Analytics tools may also use different cookies 
for different functions ranging from identifying 
referring sources of traffic and tracking navigation 
to configuring custom variables. 

By default, visitors are not notified when 
cookies are collected by their computer’s web 
browser. The problem is, some people view them 
as an infringement on privacy and according to 
research, 25 per cent of all web users clean out 
their cookie folders at regular intervals. 

This skews the data that analytics tools collect 
especially in the context of unique and returning 
visitors, with the unique visitor count being heavily 
overstated in some cases. 

Although there are few viable alternatives 
available, an update to the EU's Privacy and 
Electronic Communications Directive due to come 
into effect on 25 May could have an impact on the 
use of cookies. Site owners who are not familiar 
with the issues might find it worth looking into. | 
See p134 for our Big Question on the new Directive 


22222 Cookie resets in the United Kingdom 


Information measured 
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Approximately, what percentage of the web analytics data you collect is useful to you organisation for driving decision-making? 


Percentage of data 


Source: Online Measurement and Strzegy Report 2010- Econsulantey in association wh min. 
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Percentage of respondents 


Release StorsMags Рала 


Percentage of respondents 
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Name Dr Dave Chaffey 
Job title Director 
Company Marketing 
Insights Lid 

URL marketing- 
insights.co.uk 


net: What is the level 
of awareness around 
cookies? 

DC: Research shows 
most people know 
about them. The 
perception is almost 
always negative, | think 
this was initially fuelled 
by antivirus software 
vendors portraying 
them negatively. 


“net: Do you think the 
‘online industry 1s too 
dependent on cookies? 
DC: Tracking the path to 
purchase for complex, 
high value purchases 
through attribution 
models is certainly 
useful for companies 
who invest a lotin ad, 
affiliate and search 
media. All analytics 
solutions including 
Google Analytics use 
them too. But more 
fundamental is the 

use of persistent and 
session cookies on 

site to deliver the 
experience, 


„net: Can you envisage 
a viable alternative? 
DC: It’s difficult to see 
a solution acceptable 
to consumers. Other 
solutions such as 
Shared Flash Objects 
have generated 

even more hatred. 
Fingerprinting through 
hardware and software 
configuration of the. 
user isn’t going to 
prove popular either. 
And the Do Not Track 
Us initiative in the US 
shows a high level 

of mistrust, 
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Startup 


In today’s online environment, attention is a 
valuable commodity. Wendy Tan White looks at 
how you can hold on to it when it comes your way 


Dont let here today 
be gone tomorrow 


At Moonfruit, we see companies all 
@ the time who feel like their first taste 

of success is already the finish line. In 
reality, that’s when the difficult part begins. 
Sustaining a successful business takes a lot of 
time, love and resources. Staying hungry is half 
the battle (if not all of it). 

We saw this ourselves when we ran a 10-year 
anniversary competition on Twitter back in 2009. 
We were giving away 10 Macbook Pros, and we 
became the top trending topic for 60 straight 
hours. That's when we really started making 
traction, both here and in the US. 


Join the discussion 
To change your approach you need to shift your 
mindset from “push” to “participate”. 

The hardest part of sustaining momentum 
is being agile enough to turn ona penny, stop 
shouting so much and, instead, become an active 
part of the discussion — engaging in a dialogue 
with your audience. 

So, how do you do this? Well, your customer 
must come first. If you can turn these customers 
into raving fans of your business, they will do your 
marketing for you. 


Don't underestimate the importance of these 
relationships! Always remember to engage 
continually with them, so that they feel valued, and 
get the best possible experience from your business 
and product, 

This is something we strive to achieve with 
Moonfruit - we have a fantastically loyal and 
buzzing customer community that inspires us daily 
with its passion and creativity. 

We've seen a real resurgence in the last few 
years of ambitious startups and SMBs as customers. 
Perhaps it was the economic downturn that 
caused people to refocus and take on challenges 
they wouldn't normally take, However, with 
approximately 5.7million small businesses in the US, 
accounting for 99.7 per cent of all companies, and 
with women-led organisations being the highest 
growth segment, | believe we are at the beginning 
of a new era. 

What concerns me is that the important stuff- 
building an amazing and solid business from the 
ground up — can be washed away by mishandling 
your moment in the sunshine. 

Being smart, calculated and committed to the 
task can help you to capture that moment and 
harness its true potential, | 


~ Build your business for the long haul 


The most important way to sustain momentum 
following an avalanche of press or social media 
attention is to not become reliant on that 
attention. If your business can only succeed if 
you're constantly in the spotlight, you're doomed 
to failure right from the start. 

Ultimately, your success depends on having 
a sound business that delivers results, not just 
noise. You need a good business model, an 
operational structure that works and an offering 
desired by a ripe market. But once you get a 
level deeper, there are a few critical steps you can 
take to ensure that your business is set up to 
maximise these opportunities ... 


3 Keep visitors 2 Always know what 
on your site by your story is 

communicating your ^ Focus on knowing what 
vision to them your real business story 


Build a web presence 
that communicates your 
vision to customers in a 
compelling and simple 
way, If you do this 
properly, you will make 
the most out of every 
visit to your site and 
your marketing efforts 
will be amplified, 


and message is — it's 
what makes you appear 
interesting and the best 
way to empower your 
customers. It will ensure 
that your site receives 
long-term quality 
attention rather than 
only short-term 
quantitative spikes. 
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3 Focus on being lean, 
not frivolous 

This point applies 
particularly to startups. 
The concept of being 
‘lean’ is critical and 
enables you to build 

an agile, less wasteful, 
lowburn company. 
Through this, any media 
attention you get can 
help you to really propel 
your company (when 
you're ready of course). 


This month's 
recommended... 


Name Lessons learned: 
The Lean Startup 

URL www.startup 
lessonslearned, 
com/2008/09/lean- 
startup.html 

Info The original 

blog post by Eric 

Ries, from September 
2008, explaining the 
broad concept and 
characteristics of a lean 
startup approach. 


Name The Lean Startup 
URL theleanstartup. 
com 

Info The central hub 
of the lean startup 
movement, with details 
on related upcoming 
events and a list of 
books published 
regarding the idea. 


Name Lean Software 
Development: An 
Agile Toolkit by Tom 
Poppendieck 

URL netm.ag/lean-216 
Info This excellent. 
book outlines the 
seven key principles 

of translating the lean 
startup approach to your 
unique environment. 


But being lean means 
you won't have to be 
reliant on the effects of 
that coverage. | 


Contact и... 
Do you have a suggestion 
ог question about finding 
investors? Email us at 
feedback@netmagazine. 
som 
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Pushin 


Big retailers are creating online magazines 
to promote their brands, says Fadi Shuman 
— but are they getting it right? 


brands 


through online 


Both John Lewis and Proctor & Gamble 
are joining the growing number of big 
retailers creating online magazines to 

support their ecommerce activity. This news is a 

sign that big brands are waking up to the power 

of content to help drive conversion and sales 
within their online shops. 

Once it was enough to have a few good pictures 
оп your site and a blog to share your views. But, as 
user experience becomes increasingly important, 
shoppers are looking for more compelling reasons 
to keep coming back. This is where regularly 
updated magazine-style content will play an 
increasingly important role in ecommerce. Not only 
does it enable retailers to build closer bonds with 
customers by giving them content that reflects 
their interests, it also acts as a sales tool. 

One of the best examples of this is Net-a-Porter, 
where founder Natalie Massanet — a former 
fashion editor of Vogue — uses the content as a key 


driver for sales across the site. Not only does the 
site offer a rich mix of media — including video and 
written comment — it also covers areas such as new 
arrivals and trends, helping to engage the viewer 
and push them to purchase items that they 
wouldn't otherwise have seen. 

For maximum impact, 105 crucial that all this 
content is searchable and linked to the relevant 
items, By using content in this way your average 
ecommerce site is transformed from a glorfied 
catalogue into a powerful sales tool that draws 
people back and directs them to new things to buy. 

But there are two key challenges here. The first 
is relevance. Any content that’s irrelevant to your 
customers will be dismissed. The second is having 
the skills to develop the content. You can either 
buy this in or find a partner to help you. 

| think we will increasingly see ecommerce 
agencies teaming up with publishers or other 
content providers. | 


Find your consumer online 


Name Shenan Reed 
Job title Managing 
director/founder 

Company Morpheus Media 
URL _morpheusmedia.com 


With 28 per cent of the world’s population and 
77 per cent of Americans online, digital media 
cannot be ignored as a marketing medium, But 
with over 266million websites, how are brand 
managers expected to choose where they should 
spend their media dollars? Search engines are 
the gateway to the internet but this is pull, not 
push marketing. Here are five quick tips to help 
you better understand the digital marketplace 
and where to place your media dollars and time. 
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1 Search engines 
Forty-nine per cent 

of internet users 
consistently visit search 
engines. Search is 

non negotiable: you 
must be there or your 
competition will take 
those users away. 


with the information 
you want (restaurant 
reviews, nightlife etc). 
Now imagine you're 
a restaurant owner 
in that city — placing 
advertising around all 
those sites is a simple 
way to make sure it's 
focused. We cal this 


2 Content sites Endemic Advertising. 
Imagine you're going 

опа city break. Your 3 Non-endemic 
travel is booked, now — advertising 


you want to know 
what to do when 


you get there, Search 
engines will take 
you to a host of sites 


By understanding 
what else consumers 
are interested in, we 
can find non-endemic 
places to market to 


them. if you learned 
that people who visit 
your restaurant's 
website also go to 
online theatre ticket 
agencies, you could 
look at offering deals 
for theatre-goers. 


4 Social media. 
Make a commitment 
to social media. Never 
start a Facebook раде 
for your brand then 


ignore the fans. Engage 


them, ask questions, 


listen to their concerns 


and take a genuine 
interest n them. 


This month's 
recommended... 


Name Slideshare.net 
URL slideshare.net 
Info SlideShare is a 
service enabling people 
to share presentations, 
documents and 

professional videos. 

Just search for any 

topic and you'll get 

a plethora of great 

presentations on how 

the professionals do it. 


Name Inspire UX 
URL inspireux.com 
Info. InspiraUX is a 
blog that posts quotes 
and articles to inspire 
and connect the UX 
community, The focus 
is on the impact that 
user experience has on 
people, business and 
the world. 


Name .net 

URL netmagazine.com. 

Info Not seen our 
relaunched site yet? 
There's new content 
going up daily, so check 


it out now. 


5 Track, analyse and 
optimise 

Use Google Analytics 
‘on your site (it's free) 
and let it guide your 
decisions. Nothing is set 
in stone. You can make 
changes on the fly. 


Contact us ... 

Do you have question 
about ecommerce? Use the 
Subject line “ecommerce” 
and email feedback. 
 netmagazine.com. 
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We're on a worldwide search for the hottest 
young artists and illustrators. 
Do you have what it takes to become one 
of our Rising Stars of 2011? 


. . . €. . S 
The ultimate magazine for digital artists! NOBLEI ` 
Full competition details are in the latest 
issue of ImagineFX 
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Is the EU ePrivacy 
directive a good 
way to handle 
privacy concerns? 


The new ePrivacy directive (see 
page 130) requires advertisers to 
get consent before tracking users’ 
behaviour. Industry concerns have 
been raised over the practicalities 
of carrying out the law and the 
definition of “tracking”. But what 
do our experts think? 


134 wnet/july 2011 


Ecommerce expert 
Ben Dyer 
Actinic 


wwwactinic.co.uk 


The news that the EU is working with 
the browser suppliers to allow users 
to approve cookies through browser 
settings is verging on the farcical. 

After all, how often do you change your 
settings? Will you have to do it every time? 
Will you even care? 

Also, what about business? A significant 
proportion of the web is funded by 
advertising, much of it tailored to the 
web browser, which in my opinion often 
improves the experience for users. 

Ben Dyer is director of ecommerce firm Actinic 


Social expert 
Suw Charman-Anderson 
Independent consultant 


While we need some legislation to 
protect privacy, the answer just isn't as 
simple as “Make it so". 

Technology is particularly vulnerable 
to ill-considered legislation because often 
what's easy to say is hard to do. And that's 
basically where we're at with cookies. 

We know that cookies are an important 
part of the way that the web works 
and that without them, people’s web 
experiences can be degraded. But we also 
know that some businesses will, like sulky 
teenagers, push the boundaries. 

When it comes to behavioural 
advertising, one only has to look at Phorm, 
who carried out secret trials of software 
which could only be legal in the UK if users 
had opted-in, to see the extent to which 
cookies can be abused. Yet a technical 
solution is far from simple, either to design 
or implement. Perhaps here the issue is 
not the problem, but the scale of it. 

The number of businesses that abuse 
cookies is likely to be very small. It makes 
no sense to look for a broad solution, like 
compulsory cookie opt-ins, which would 
punish law-abiding websites whilst failing 
to prevent the abusive minority from 
invading your privacy. 

In my opinion, the Department for 
Culture, Media and Sport, which is charged 
with interpreting the ePrivacy Directive for 
the UK, should focus on understanding 
the general characteristics of invasions 
of privacy, should ensure that UK law 
recognises such transgressions as illegal, 
and should instruct the Crown Prosecution 
Service to prosecute to the fullest extent 
those who break the law. Unfortunately, 
if Phorm is anything to go by, companies 
can expect to get off scot-free. What's the 
point of creating new and likely onerous 
guidelines if the CPS doesn’t prosecute 
breaches of the laws we've already got? 
Suw is a social technologist, writer and speaker 
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Business specialist 
Dickie Armour 

Fibranet Services Ltd 
www.freeparking.co.uk 


I'm not convinced it 
the technical solutions still not in place 

it will be hard for the Information 
Commissioner's Office to take real action. 

Most web users are aware of cookies 
and the fact that many websites keep a 
record of our browsing habits. | personally 
don’t have an issue with my online privacy. 
| like the fact that Amazon prompts me 
with news about new items that are 
similar to my previous purchased items. 
This enhances my online experience. 

This is no different to the good old days 
of a local shop keeper knowing and 
remembering our buying habits and giving 
us suggestions. Or when you go into your 
local coffee shop and the barista knows 
your preferred variety of coffee. 

I'm also а user of Twitter and Facebook 
and Linkedin. Again, companies can and 
should be listening to the conversations 
on there. It gives them access to valuable 
consumer data. BT Care has done a great 
job of listening to its customers on Twitter 
and jumping in to help them. 

The other aspect | think is very exciting 
is that bigger companies such as Virgin 
America and others are seeking out the 
influencers on social media and rewarding 
them, based on their Klout score. See 
netm.ag/klout-216 for further details. 

Whilst our online privacy is important, 1 
like the fact that some online ad agencies 
and brands are being proactive and 
rewarding people for access to their data. 
Dickie Armour is general manager of Fibranet 


Internet playboy 
) Drew Curtis 
Fark 


www.fark.com 


Marketers and advertisers will use 
any and all data that they’re not 
specifically prevented from using. Any 
regulations need to be very specific 
about what can and can’t be used. 

So rather than defining amorphous 
terms like “tracking”, just spell out the 
specific behaviours that aren't allowed. 
Then set potential damages to “up to” 
€10billion per infraction and watch the 
compliance roll in. 

Drew is the owner of Fark.com 


Hosting expert 
Steve Holford 
Fasthosts 
www.lasthosts.co.uk 


The sentiment is right. However, the 
implementation of the directive could 
cause significant interruption to the 
user experience. If users are going to 
be presented with pop-ups as many are 
predicting, they will likely get frustrated, 
close the pop-up and be unsure if 

they have opted out of cookies or not. 
Customers are already able to change 
their cookie settings in their browser, an 
awareness campaign to do this may be a 
more suitable approach. 

Steve Holford is chief marketing officer at Fasthosts 


User experience guru 
е) Alastair Campbell 
Nomensa 
BEA wwwinomensa.com 


The EU directive seems typical of laws 
aimed at the internet — it doesn’t seem to 
account for how things work. 

When | open a website (such as www. 
culture.gov.uk, who are in charge of this 
law) there can be over a dozen cookies 
set from several domains. Creating an 
interface to get permission for all of these 
different cookies would be a nightmare. 
I've used browsers that ask about every 
cookie, and it’s no fun as a user either. 

Another aspect that doesn’t seem to 
have been considered is the use of third- 
party services such as Google Analytics. If a 
user gives permission for analytics on one 
site, does that count for all sites that use 
the service? Given that the Government's 
own sites simply rely on a privacy 
statement, | would only be worried if | ran 
a behavioural tracking business. 

Alastair Campbell is director of user experience at 
digital agency Nomenso 


Social expert 
#8 Andreas Maurer 

1&1 Internet Ltd 

www.land1.co.uk 


The ePrivacy directive is well intended, 
but in my view in its current version is 
neither feasible nor helpful. It doesn’t 
provide regulations for what way European 
governments should protect users from 
tracking technologies. The solutions 
presented so far by authorities would 
mean a severe impact on consumers’ 
browsing habits. It is unacceptable and 
unrealistic to make every visitor of a 
website consent to each cookie when 
surfing online. This would present a huge 
obstacle for ecommerce activities. In 
addition, every internet user already has 
the possibility to exclude cookies from 
their browser if desired. 

Andrew is head of social media for 1&1 
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Activist 
Oxblood Ruffin 
Hactivismo 
www.hacktivismo.com. 


There's a certain irony or hypocrisy 
in governments pretending to be 
interested in a citizen's privacy. And 
advertiser's crying foul at more limited 
access to consumers is nonsense. 
Consumers should just disregard these 
smokescreens. Don't accept cookies 
and use TOR (torproject.org). 


Oxblood Ruffin is the founder of Hacktivismo 


Security guru 
Simon Freytag 
= General Flows 
- www.generalflows.com 


Online privacy covers more than just 
cookie tracking. Consider the recent furore 
over iOS and Android storing local copies 
of your location history; the role of the 

ISP as either a mere conduit or a privacy 
snitch; or network-layer technologies like 
the banned Phorm trials. However, the 
internet hasn't just caused greater privacy 
concerns for us, it has also freed up a lot 
of information. 

Tracking isn’t necessarily bad — | prefer 
relevant adverts to irrelevance; Google 
gives me optimised search results; 
websites can improve their user experience 
by monitoring user interactions; and 
relinquishing privacy can be the price paid 
for otherwise ‘free’ services. Given this 
complexity, I’m not too worried whether 
the ePrivacy directive is good or not. But | 


am pleased the EU is taking an interest. 


If this went on unregulated | could 
see things going wrong, such as when 
Google collected private data from 
people's wireless routers via StreetView 
cameras. So I'm content to let the EU 
not necessarily get it right straight away, 
but instead work with interested parties 
(privacy campaigners, ISPs, marketing 
firms, governments, etc) and gradually 
work out an up-to-date set of data 
protection and privacy guidelines. 

And unlike David Cameron, who recently 
complained the UK judiciary are defining 
privacy law following EU guidelines 
without recourse to UK parliament (with 
respect to those superinjunctions), | have 
quite a lot of faith in the EU to get it right. 
Simon is a security expert for General Flows 
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Áweb. hosting 


hen it comes to choosing a hosting provider, it can be 

W had to see the wood or he tees, so we've brought You 
this handy guide to help you decide, All details were 

accurate at time of press, but don’t forget to check the small print! 
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POP3 accounts 

Front page extension 

Database support 
hopping cart 

Virus filter 

Phone support 

Web control panel 
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Hetzner Online AG 
hetznercoi 


HETZNER 


ukhosting.co.uk 


Internetters 
www internetters.co,uk 


Krystal Web Hosting 
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18 Internet Lid Dynamic Cloud Server 0871 641 2121 


Continuum Hosting Ud Demonstration Account 01962 658 271 
wwwicontinuum-hosting.com ^ Development Environment 
Custom Environment 


continuum qx 
Cloudhosts tight 0800 542 2703 
www.clouddhosts co.uk Medium 
Heavy 
Premium 
HOSTS 
FlasticHosts Ltd Flexible 0845 686 8642 
slasnchoss co.uk 
ElasticHosts 
Pekle seners n the бо 
Cloud platform 0800 061 2801 
Registeri.net. 
registerz net. 
Register1.net 
Serverstieam. 0800 318 5896 
severstream,com/cloud 
Ж serverstream 
StratoGen VMware Hosting оваз 544 0465 


stratoger.net 
Stratecen K 
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High performance, resilient, secure solutions & award winning service 
juts your hosting in safe hands. Contact UKFast today without obligation 
or advice on your specific hosting needs. 
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0800 458 4545 www.ukfast.co.uk 
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nothing is 
unpossible,, 


Visit the world's best-selling 
magazine for web developers e 
and designers today! www.netmagazine.com 
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.net/shopping centre 


Everything a web developer needs.. 


Cloud web hosting 
PHPS / MySQL web hosting 
support by phone and email 


om £3.99 a month, 


Text messaging 


Bulk text messaging at 8p a message. 
messages using our web interface or API 


9€ evrofasthost 


Shared Windows Hosting trom ому £3.35 p/m 


Business class web hosting with UK support at affordable prices 


Virtual & Dedicated Servers som «30 p/m 


Full system control and unrivalled performance with your own server 

Domain Names registration, management, forwarding 
Live Support! @osCommerce M WorPress 
www.eurofasthost.co.uk - 0800 862 0193 


COMPILA 


cheaper, greener, Iaster, web hosting 
WWW.COMPILA.COM 
0871226 1144 


Domain 0 

names 0 
cheaper than our 
leading competitors 


ed! 


og 


without any loss of service or qualily....Guo 


Website 
hosting 


= 
60, 


по risk, money back guaranteel 
es 


lemonstorm 


www.lemonstorm.com | 0845 680 0843 


{30% 


off for studerts 


жәе 


Domains 
All major domain names available. 


„сот, .net and .co.uk all £6. 


SSL certificates 


Low cost SSL certificates from trusted brands, 


A wide choice available to suit all projects. 


Purple Paw co.uk 


New Shared Hosting Packages, with up 
to 2GB Disk Space and 10GB Bandwidth! 
No site? No problem! 
Email-only hosting just £25/year! 


% 


About Us: 


eNew Website 
*New Packages 
*New Features 
*New Servers 
eNewsletter 
*Affiliate System 


- Web, Email, and Reseller Hosting 
- Domain Registration & Management 
- Free Domain Parking & Forwarding 

- 24/7 Control Panel & Online Support 


net Coupon: DNO3 - Pay for 12 months hosti 


This month's featured offer 


2020Media 


WWW.2020MEDIA.COM 
Phone: 0330 010 2020 


WordPress Hosting 
UK Hosting 

Free Setup 
Wordpress Experts 
From £3.75 


WEBHOSTING - DEDICATED & VIRTUAL SERVERS 
PHP-CGI-JAVA-ASP-COLDFUSION-MYSQL-MSSQL 
WORDPRESS-JOOMLA-MAGENTO-DRUPAL-CLOUDAV 


^n 
* 
* 


UK Based Network Est 1999 New subscriber plans now available s 
RIPE NCC Member UK, ccTLD and Top Level Domain Names, іру6 * yes 


.net/advertising 


/to advertise 


call Ricardo Sidoli on 


or email: ricardo.sidoli@futurenet.com 
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Budget Web А 1 1 .99 
Hosting Pack £ jer year 
V Unlimited Web Space У Unlimited MySQL V 100MB WebSpace | V1 MySQL Database 


V Unlimited Bandwidth — V One-Click Script installs Y/4 GB I month Bandwidth У FREE Web Templates 


М Unlimited Email inboxes FREE Customer Support М 5 Email Accounts `V FREE Customer Support 


visit www.111WebHost:com for great value weh hosting packages 


HOST UNLIMITED DOMAINS 


WebHosting ResellerHosting 
from #2.04рт from £8.33pm 


ban 
Single Site Hosting 


*3GB UK Web Space 
* 36B Premium Bandwidth 

* Unlimited MySQL Databases 
* Unlimited POPS, 

* PHP, СС), Реп, FrontPage 


jebwebsolutions.COUk s * New Updated Packages 
Multi Site Hosting = 2 Months FREE 

* 1068 UK Wab Space - қ 
4528 Prosman Bandit = Virus & Spam Protection 


x Host Unlimited Sites ° 
55 + Host Unlimited Domains: = 99.99% Uptime 


Reseller Hosting 
* Unlimited UK Web Space 


set your CUIRE 


* Reseller Control Centre 


site f есте coa ua 
ree аа 
WWW.BPWEB.NET 


Multi-Domain Hosting Specialists қ 


Call Now 08707 42 4474 


3P per minute rom BT Las ve roses. Ai prices shown erchde VAT @ 175%. 


0800 043 0 53 
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next_month 


The pros 
guide to 
WordPress 3 


We reveal how to get the best 
out of the world's favourite CMS 


ne 


new issue 
on sale 21 Jun 


0844 848 2852 
ог (rest of the world) +44 (0)1604 251 045 


>>Price per issue 
£8 UK, £9 Europe, £10 Rest of the world 


HETZNER DEDICATED ROOT SERVER EQ 10 


INDIVIDUALIZE 
YOUR SERVER! 


i 
2 
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HETZNER 


Intel®Core™i7-920 Quadcore indl. Intel*Cora" i7-980X Hexacore indl. ONLINE 
Hyper-Threading Technology © heer Threading Technology 

8GB DDR3 RAM 24 GB DDR3 RAM 

2x750 GB SATA-II HDD Up to 4 hard disks selectable: Hosting Next Level means that Hetzner Online 
(Software-RAID 1) 1x 1,5 TB SATA Il £8/Month now offers the most powerful dedicated hosting 


Linux operating system 1x300 GB SAS £13/Month solutions currently available. The Hetzner Online 


Windows Server from £12/Month plus 4-Port Hardware-RAID a š; E р 5 
Unlimited Traffic" Controller £13/Month ledicated server plans are designed to provide 


Rescue system 1x 120 GB SSD £13/Month a higher level of speed with an extremely stable 
Domain Registration Robot Dnüx орага suem network structure in our self-owned data centres 
Windows Server from £12/Month 4 4. 
100 GB Backup space Unlimited Traffic in Germany. Coupled with best prices 
No minimum contract Rais sah and outstanding support, we surpass 
Setup Fee #115 y" 
Domain Registration Robot customers’ expectations around 


100 GB Backup space { the world. 
£39 No minimum contract fem Ё, b 
Setup Fee £115 5 
V www.hetzner.info 


SAVE £7.50! As a new customer you can save £7.50 on your first payment for any of infoGhetzner.com 
these advertised products. Please use the voucher code: 242105 (Expires on 24 June 11) 


“Tafe aspa аке We wll өтет Фе conreciol VEI I S CHOLOLE MAGS) ek; Isa La VQ. Optional, a permanent 10ОМВу/» bandida wa be charged at & per addtional ТВ. 
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tems ШӨ КӨМ: 
respective manufactures. Intel, the Intel Logo, Intel Core, and Intal Inside are trademarks of in 


All prices exclude VAT and are subject to th 


“You even get six-star customer support thrown in.” 
- PC Pro magazine 


GO GREEN AND 


HALVE YOUR IT COSTS 


RENT YOUR SERVERS FROM MEMSET 


M ll 
ш ІШ | TW ШІ 


from virtual machines to the most powerful dedicated servers 


iniserver VM1000 Dell PowerEdge R900 
8 x P4 2.4GHz (equivalent) 4 x Quad-Core Xeon 2.5GHz 
.5 GB RAM 128 GB RAM 
0 GB RAID1 SATA 750 GB RAID6 SAS 
39.95 /month £995 / month 


We've been voted the UK's best hosting company for 4 years running. 
Isn't it time you found out why? 


0800 634 9270 


CarbonNeutral® company 


ет 


Keep your markup 
slim with С553 


Build a zoomable 
user interface 


Build ASPNET sites 
with Razor 
Store.js 


Xara Web Designer 7 
Premium 


